在组件 Vue.js 中渲染组件答案

【问题标题】：Rendering component in component Vue.js在组件 Vue.js 中渲染组件
【发布时间】：2018-03-03 16:54:29
【问题描述】：

我正在构建一个可以从 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，而不是解析为对象

当我运行此代码时，我收到以下错误

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

有没有人知道更好的解决方案或解决这种情况的方法？

提前谢谢你，

杰伦

【问题讨论】：

如果你把HTMLElement,改成new HTMLElement,会怎么样
你应该引用HTMLElement，同样，数组没有type & content 属性

标签： javascript vue.js components

【解决方案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>

【讨论】：