vue 组件递归的使用

场景：我们有时希望在一个组件内部渲染该组件本身，列如树形结构的数据，不知道它有几层,所以需要递归遍历

1.需要递归的子组件，如果组件使用到emit等时，需绑定attrs，listeners 递归组件调用的名称是你当前组件的name

    export default {
        name: 'Panel',
        props: {
            data: {
                type: Array,
                default: function() {
                    return []
                }
            }
        }
    }
</script>

<ul>
   <li class="panel-border" v-for="(item,index) in data" :key="index">
      <!--需要显示的内容-->
      <collapse-transition>
         <template v-if="item.children && item.children.length > 0">
              <ul v-show="item.expand">
                   <panel :data="item.children" v-bind="$attrs" v-on="$listeners"></panel>
              </ul>
         </template>
      </collapse-transition>
   </li>
</ul>

2.父组件调用

<div class="node-container-views">
     <panel :data="data" @on-update="onEmitUpdate" ></panel>
</div>

这样一个递归组件就写好了