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')
  },
}