组件Vue.js中的渲染组件

Question

我正在建立一个可以从JSON生成HTML的系统。

以下JSON

"type": "span",
"content": [
  {
    "type": "span",
    "content": [
      {
        "type": "div",
        "content": []
      }
    ]
  }
]

应生成以下html

<span>
 <span>
  <div></div>
 </span>
</span>

我做了这个来转换JSON

export default {
  name: 'HTMLElement',
  props: {
      data: {
          type: Array,
          default: []
      }
  },
  render(createElement) {
      return createElement(
          this.data.type,
          createElement(
              HTMLElement,
              {
                  props: {
                      data: this.data.content
                  }
              }
          )
      );
  }
}

属性数据仅是JSON，而不是解析为对象的JSON

当我运行此代码时，出现以下错误

Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

有谁有更好的解决方案或解决此问题的想法？

先感谢您，

吉荣

Answer 1

您似乎需要递归函数。 请参见下面的buildElement方法。 它在render() ，并按您描述的方式工作：

 Vue.component('html-element', { name: 'HTMLElement', props: { data: { type: Object, default: {type: 'div'} } }, render(createElement) { return this.buildElement(createElement, this.data) }, methods: { buildElement(createElementFunction, data) { return createElementFunction( data.type, (data.content || []).map(c => this.buildElement(createElementFunction, c)) ); } } }); new Vue({ el: '#app', data: { elementData: { "type": "span", "content": [{ "type": "span", "content": [{ "type": "div", "content": [] }] }] } } }) 

 span { display: inline-block; border: 1px solid red; width: 50px } 

 <script src="https://unpkg.com/vue"></script> <span> <span> <div></div> </span> </span> <hr> <div id="app"> <html-element :data="elementData"></html-element> </div>