在vue2中生成了有问题的组件树

Question

我有一个场景，我需要构建一个嵌套菜单，菜单可以有无限级别的嵌套层(即使认为这不会发生(，我想知道动态构建子组件列表的最佳方式是什么？

这是一些测试代码，我把它们放在一起，试图从一个函数中获得一些动态代码，该函数本质上会给我一个数组中的组件列表等。有问题地构建子组件树的最佳方法是什么？

<template>
<a-row>
<div v-html="getContent()"></div>
</a-row>
</template>

<script>
export default {
methods: {
getContent() {
return `<div @click="sayHello()">RYAN</div>`
},
sayHello() {
console.log('Hello there');
}
}
}
</script> 

Answer 1

您可以尝试使用:is并传递组件：

new Vue({
el: '#demo',
data() {
return {
component: '',
contents: ['RYAN', 'DJURO', 'SPIRO']
}
},
methods: {
getContent() {
this.component = 'comp'
},

}
})
Vue.component('comp', {
template: `<div @click="sayHello">{{ content }}</div>`,
props: ['content'],
methods: {
sayHello() {
console.log('Hello there ' + this.content);
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="getContent">getContent</button>
<ul v-if="component">
<li v-for="(cont, i) in contents" :key="i">
<component :is="component" :content="cont"> </component>
</li>
</ul>
</div>