一、建一个.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"
}]
}]
}
],