vue 递归组件

<template>
   <ul>
     <slot name="title"></slot>
     <li v-for="(item,index) in treeData" :key="index">
      <NavMenu :treeData = "item.children" v-if="item.children && item.children.length>0">
         <template slot="title">
            <div>{{item.name}}</div>
         </template>
      </NavMenu>
       <!-- 最后一级 -->
      <div v-else @click="handleClick">{{item.name}}</div>
     </li>
   </ul>
</template>

<script>
export default {
  name:"NavMenu",
  props:{
    treeData:Array,
  },
  data() {
    return {

    };
  },
  methods: {
   handleClick(){
     console.log("最底层级")
   }
  }
}

<NavMenu :treeData ="treeData"></NavMenu>

import NavMenu from "./digui.vue" 

      treeData:[
        {
          name:"名称11"
        },        
        {
          name:"名称1",
          children:[{
           name:"名称1-二级", 
           children:[{
             name:"名称1-三级-1"
           },{
             name:"名称1-三级-2"
           }]
          }]
        },
        {
          name:"名称2",
          children:[{
           name:"名称2-二级", 
           children:[{
             name:"名称2-三级-1"
           },{
             name:"名称2-三级-2"
           }]
          }]
        }
      ],