Vue手记 - 递归组件 - 子级不渲染问题解决
- 定义组件
<!-- Html 代码 -->
<div id="app">
<repeat-com :data="myarray"></repeat-com>
</div>
<script>
new Vue({
el: "#app",
data: {
myarray: [
{ text: "li-1", childs: [{ text: "li-1-1" }, { text: "li-1-2" }] },
{ text: "li-2", childs: [{ text: "li-2-1" }, { text: "li-2-2" }] },
{ text: "li-3", childs: [{ text: "li-3-1" }, { text: "li-3-2" }] }
]
},
components: {
"repeat-com": {
data() {
return {};
},
props: ["data"],
template: `
<ul>
<li v-for="(v,i) in data" :key="i">
<span>{{v.text}}</span>
<repeat-com v-if="v.childs" :data="v.childs"></repeat-com>
</li>
</ul>
`
}
}
});
</script>
- 显示结果:
发现子级没有渲染出来 ?????
- 查看 console 输出
最后找到的原因是:没有给组件定义 name 字段 。
"repeat-com": {
// 这里加入了一个 name
// 前面定义单层级组件时一直没定义 name 字段,这时才发现多层级组件中 name 的重要性
name:'repeat-com',
data() {
return {};
},
props: ["data"],
template: `
<ul>
<li v-for="(v,i) in data" :key="i">
<span>{{v.text}}</span>
<repeat-com v-if="v.childs" :data="v.childs"></repeat-com>
</li>
</ul>
`
}
-
显示结果:
-
问题结论:
- 单层组件可以没有 name 定义;
- 组件递归时必须有 name 定义;
- 组件递归时的节点名使用的自身 name 。