vue组件的自调用（递归调用）

需求：封装一个树形组件，数据结构如下所示，但是层级不确定。

treeData:[
        {text:1,children:[
          {text:2,children:[{text:5},{text:'55'}]},
          {text:3},
          {text:4},
        ]}
      ]

因为层级不确定，那么就存在组件递归调用的可能。通常我们在封装vue组件时会有一个name的属性，它就是用来进行递归调用的。

 

<template>
  
  <ul class="tree">
    <li v-for="(item,index) in treedata" :key="index">
      <div class="ui-draggable ui-draggable-handle ui-droppable">
        {{item.text}}
      </div>
      <my-tree v-if="item.children && item.children.length>0" :treedata="item.children"></my-tree>
    </li>
  </ul>
</template>

<script>

export default {
  name: "myTree",
  props:{
    treedata:{
      default:function(){
        return []
      }
    }
  },
}

 

这样我们在使用这个组件的时候只需要进行传递数据即可。