递归组件的使用:
注意:使用递归组件时 组件里的 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" , } |