組件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>