一、背景需求
在页面上渲染一个多级列表的时候,数据往往也具有多个层级
例如:数组的每个元素都是一个对象,对象中的value可能是一个数组
{
"ret": true,
"data": {
"sightName": "大连圣亚海洋世界(AAAA景区)",
"bannerImg": "",
"categoryList": [{
"title": "成人票",
"children": [{
"title": "成人三馆联票",
"children": [{
"title": "成人三馆联票 - 某一连锁店销售"
}]
},{
"title": "成人五馆联票"
}]
}, {
"title": "学生票"
}, {
"title": "儿童票"
}, {
"title": "特惠票"
}]
}
}
在这种情况下,使用多重循环的HTML代码效率并不高,而且会增加后期维护的成本
vue提供了一种更好的实现方式:即递归组件
二、递归组件的概念和使用
递归组件,顾名思义,就是在组件内部调用自己
通过使用 组件的name选项 对应的标签,实现多重循环的效果
同时,在调用组件自身的时候,要通过v-if实现条件渲染
防止因无限调用组件而导致栈溢出
以上面给的数据为例,我们希望将 categoryList 渲染为多级列表
当父组件将 categoryList 传递给子组件的 list 变量后:
<template>
<div>
<div class="item" v-for="(item, index) of list" :key="index">
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="item-children">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script>
若当前被循环的item有children,就递归调用自身,进入下一层级
实际的效果如下: