递归组件的使用

递归组件的使用：     

注意：使用递归组件时  组件里的 name 必须写

.首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现 “max stack size exceeded”的错误，也就是栈溢出，那么我们可以用v-if=false作为递归条件的结束，当遇到v-if为false时，组件将不再进行渲染。

 

1.首先我们获取到的数据格式如下：

"categoryList": [{
        "title": "成人票",
        "children": [{
          "title": "成人三馆联票",
          "children": [{
            "title": "成人三馆联票 - 某一连锁店销售",
            "children": [{
              "title": "第四级的三馆联票 - 某第四级的三馆销售"
            }]
          }]
        },{
          "title": "成人五馆联票"
        }]
      }, {
        "title": "学生票"
      }, {
        "title": "儿童票"
      }, {
        "title": "特惠票"
      }]

　　可以清楚的看到   children  下面 又有title ； title里又包含了chileren……；像这种情况我们可以使用递归组件来实现页面的渲染

　　递归组件的：组件自身调用自身组件

2.父组件：把获取到的数据 传递给子组件

<div class="content">
      <detailList :list="list.categoryList"></detailList>
</div>

3.子组件(datailList)：在子组件接收之后，进行数据的渲染

template:

<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时，继续渲染。

 

普及一下组件里name的用法：

我们在创建组件的时候，name 有时候不写， 也不会影响到我们组件的使用，但是在递归组件里，name必写；

name的用途：

1.组件的名称 

2.递归组件

3.keep-alive指定缓存 清除指定组件时

 export default {
        name: "Home",
}