前端学习 vue之递归组件

所谓递归，就是自己调用自己，和平时的递归算法本质是一样的，在满足一定的条件下自己调用自己；

• 声明子组件

<template>
   <div>
      <ul class="tree-main-component">
          <li v-for="item in data" :key="item.id">              <p>{{ item.label }}</p>
              // 满足一定的条件时进行递归调用
              <tree v-if="item.children" :list="item.children"></tree>
          </li>
      </ul>
   </div>
</template>

<script>
export default {
   // 必须声明子组件的那么属性，不然在递归调用时，会找到子组件自身；或者在子组件的components中引入子组件自身
   name: 'tree',
   // 1、由父组件传入的数据属性；
   // 2、因为是递归调用，所以当组件把自己作为子组件调用时，只能通过props进行数据传递；
   props: ['data'],   data () {
       return {}  
   }, 
   mounted () {}
}
</script>

• 如果没有声明子组件的name属性，需要在子组件中明确引入子组件自身；

component: {
    tree: () => import('@/components/tree')
}

• 在父组件中调用

<template>
   <div>
       <tree :data=""></tree>
   </div>
</template>

<script>
   export default {
       return {
            // 数据
            data: [{
                id: '1',
                label: '项目管理',
                children: [{
                    id: '1-1',
                    label: '我的项目'
                }, {
                    id: '1-2',
                    label: '其他'
                }]
            }, {
                id: '2',
                label: '废纸篓'
            }]
       }
   }
</script>