递归组件的使用

• 递归组件的概述

递归组件: 组件内部有自己的子组件标签
应用场景: 用于显示树状态结构的界面
注意: 递归组件必须有name
编码: 实现一个简单的可开关的树状结构界面的 Tree 组件

• 父组件

<template>
  <div>
    <trees :list="list"></trees>
  </div>
</template>
<script>
import myTrees from './components/treeMenus'
export default {
  components: {
    myTrees
  },
  data () {
    return {
      list: [
          {
              name: '一级菜单1',
              cList: [
                  { name: '二级子菜单1' },
                  {
                      name: '二级子菜单2',
                      cList: [
                          { name: '三级子菜单1', cList: [{ name: '四级子菜单' }] }
                      ]
                  }
              ]
          },
          { name: '一级菜单2' },
          {
              name: '一级菜单3',
              cList: [{ name: '二级子菜单1' }, { name: '二级子菜单2' }]
          }
      ]
    }
  },
  methods: {}
}
</script>

• 子组件

<template>
  <ul>
    <!-- 必须要按照这个格式 -->
    <li v-for="(item,index) in list " :key="index">
      <p>{{item.name}}</p>
      <trees :list="item.cList"></trees>
    </li>
  </ul>
</template>
 <style>
   ul{
    padding-left: 20px!important;
   }
 </style>
<script>
   export default{
       name:'trees ',
       props:{
          list: Array
      }
   }
</script>