在组件Vue.js中渲染组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在组件Vue.js中渲染组件相关的知识，希望对你有一定的参考价值。
我正在构建一个可以从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，然后才解析为Object
当我运行此代码时，我收到以下错误
Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
有没有人知道更好的解决方案或解决这种情况？
先感谢您，
吉荣
答案
你似乎需要一个递归函数。请参阅下面的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>以上是关于在组件Vue.js中渲染组件的主要内容，如果未能解决你的问题，请参考以下文章