递归组件的使用

递归组件的使用：     

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