递归组件的特点

递归组件

一、递归组件特点

（一）name属性值是必须拥有的
（二）可以在自己组件中，调用自己，而不需要引用组件
（三）必须要有结束判断，以免进入死循环

二、案例展示

1、子组件Trees

<template>
    <div class="Trees">
        {{treeList.title}}
        <ul>
            //可以在自己组件中，调用自己，而不需要引用组件
            <Trees  
            v-for="(value,index) in treeList.children" 
            :key="index" 
            :treeList="value" />
        </ul>
    </div>
</template>
<script>
    export default {
        name: 'Trees', //name属性值是必须拥有的
        props: {
            treeList: Object,
        }
    }
</script>

2、父组件Tests

<template>
  <div id="Tests">
    <ul>
      <Trees :treeList="treeList"></Trees>
    </ul>
  </div>
</template>
<script>
import Trees from '@/components/Trees'
export default {
  name: "Tests",
  data() {
    return {
      treeList: {
        title: "系统管理",
        children: [
          {
            title: "权限管理"
          },
          {
            title: "菜单管理",
            children: [
              {
                title: "新增菜单"
              },
              {
                title: "菜单列表"
              }
            ]
          }
        ]
      }
    };
  },
  components: { Trees }
};
</script>