递归组件的使用
递归组件的使用：
注意：使用递归组件时 组件里的 name 必须写
.首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现 “max stack size exceeded”的错误，也就是栈溢出，那么我们可以用v-if=false作为递归条件的结束，当遇到v-if为false时，组件将不再进行渲染。
1.首先我们获取到的数据格式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
"categoryList": [{
"title": "成人票",
"children": [{
"title": "成人三馆联票",
"children": [{
"title": "成人三馆联票 - 某一连锁店销售",
"children": [{
"title": "第四级的三馆联票 - 某第四级的三馆销售"
}]
}]
},{
"title": "成人五馆联票"
}]
}, {
"title": "学生票"
}, {
"title": "儿童票"
}, {
"title": "特惠票"
}]
|
可以清楚的看到 children 下面 又有title ； title里又包含了chileren……；像这种情况我们可以使用递归组件来实现页面的渲染
递归组件的：组件自身调用自身组件
2.父组件：把获取到的数据 传递给子组件
|
1
2
3
|
<div class="content">
<detailList :list="list.categoryList"></detailList>
</div> |
3.子组件(datailList)：在子组件接收之后，进行数据的渲染
template:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<template> <div>
<div v-for="(item,index) in list" :key="index">
{{item.title}}
<div v-if="item.children"> <!-- 中止条件-->
<!-- 组件内 调用自身--> <detailList :list="item.children"></detailList>
</div>
</div>
</div>
</template> |
当v-if设置为false时，递归组件将不会再进行渲染，设置为true时，继续渲染。
|
1
|
普及一下组件里name的用法： |
|
1
|
我们在创建组件的时候，name 有时候不写， 也不会影响到我们组件的使用，但是在递归组件里，name必写； |
|
1
|
name的用途： |
|
1
|
1.组件的名称
|
|
1
|
2.递归组件
|
|
1
|
3.keep-alive指定缓存 清除指定组件时
|
|
1
|
<strong> </strong> |
|
1
2
3
|
export default {
name: "Home",
} |