孙卫琴的《精通Vue.js》读书笔记-组件的递归
本文参考孙卫琴，杜聚宾所创作的 <<精通Vue.js: Web前端开发技术详解>>一书
在一个组件的模板中，还可以嵌套自身组件，这样就构成了组件的递归。为了避免无限递归，需要设置递归的结束条件。在例程1的recursive.html中，组件的模板会插入自身组件，从而递归遍历访问list数组中的所有嵌套的元素。模板中“”的v-if指令用来设置递归结束条件，当list数组为空，就结束递归。
例程1 recursive.html
<div id="app">
<category :list="items"></category>
</div>
<script>
const app=Vue.createApp({
data(){
return {
items:[{
type:'生物',
subtype:[
{
type:'植物',
subtype:[{type:'树木'},{type:'灌木'},{type:'青草'}]
},
{
type:'动物',
subtype:[{type:'猫'},
{type:'狗'},
{type:'鱼',
subtype:[{type:'鲤鱼'},{type:'鲨鱼'}]}
]
}
]
}]
}
}
})
app.component('category', {
props:{
list:{type:Array}
},
template: ` <ul><template v-if="list">
<li v-for="item in list">
{{item.type}}
<category :list="item.subtype"></category>
</li>
</template></ul> `
})
app.mount('#app')
</script>
通过浏览器访问recursive.html，会得到如图1所示的网页，list数组中的嵌套内容会以缩进对齐的方式一层层展示出来。
图1 recursive.html的网页