vue 組件遞歸調用

記得以前用react寫過一個遞歸渲染菜單欄，當時就想過如果用vue如何實現。最近項目又用到了vue，就決定利用閑暇時間研究一下。render函數這種方法就不說了，和react的方法差不多，這里主要寫一下vue組件之間的遞歸調用。

最后效果基本就是一個類似這種的樹形結構，當然樣式自己可以更改

渲染樹的組件，循環父組件傳過來的數據，如果有children就在遞歸調用自身組件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 []
      }
    }
  },
}

父組件只需要傳過去數據就可以了，下面的組件引入方式參考vue文檔

<template>
  <div>
    <div class="overflow">
      <div>
        <linTree :treedata="treeData"></linTree>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "zp",
  data() {
    return {
      treeData:[
        {text:1,children:[
          {text:2,children:[{text:5},{text:'55'}]},
          {text:3},
          {text:4},
        ]}
      ]
    };
  },
  components: { linTree: () => import('./components/treeContents')
  },
}