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 []
      }
    }
  },
}

這樣我們在使用這個組件的時候只需要進行傳遞數據即可。