对于一些有规律的 dom 结构,我们可以通过递归方式来生成这个结构,,那么在 vue 的模板中,我们能不能递归生成dom,答案是肯定的,在 vue 的组件中能够调用自己本身。
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name
选项来做这件事。
https://www.jianshu.com/p/ced0ea9c265c
treeData: {
name: "外层1",
children: [
{ name: "外层2-1" },
{ name: "外层2-2" },
{
name: "外层2-3",
children: [
{
name: "外层3-1",
children: [{ name: "hello" }, { name: "wat" }],
},
{ name: "外层3-2" },
{ name: "外层3-3" },
{
name: "外层3-4",
children: [{ name: "hello" }, { name: "wat" }],
},
],
},
],
},
父组件:
<child :model="treeData"> </child>
子组件:
<template>
<div>
<ul>
<li v-for="(itemchild, index) in model.children" :key="index">
<p>{{ itemchild.name }}</p>
<tree :model="itemchild"></tree>
</li>
</ul>
</div>
</template>
<script>
export default {
name:'tree',
props:{
model:{}
}
}
</script>
渲染:
-
外层2-1
-
外层2-2
-
外层2-3
-
外层3-1
-
hello
-
wat
-
-
外层3-2
-
外层3-3
-
外层3-4
-
hello
-
wat
-
-