使用vue3简单做个实现，准备共用5个组件，模拟数据。技术使用slot,props。slot实现父组件向子组件数据传递，props实现父组件向子组属性方法传递。
- MenuM:ul标签封装
- MenuItem:li标签封装
- SubMenu:结构组件，导入MenuM组件两个实例，实现一个组件对另一个组的单击显示或隐藏
- ReSubMenu:导入SubMenu,MenuItemx组件，组件递归。
- App:导入ReSubMenu，引入列表数据
- 模拟数据
menuList:[
{
title:'网站技术开发',
children:[
{
title:'前端技术',
children:[
{title:'Html5开发技术'},
{title:'javascript开发技术'},
{title:'vue开发技术'},
{title:'route-vue开发技术'},
]
},
{
title:'后端技术',
},
]
},
{
title:'网站安全技术',
children:[
{title:'Linux系统安全'},
{title:'代码审计安全'},
{title:'渗透测试安全'},
]
},
]
##MenuM:ul标签封装
<template>
<ul>
<slot></slot>
</ul>
</template>
<script>
export default {
name: "MenuM"
}
</script>
<style>
ul {list-style-type: square;}
</style>
##MenuItem:li标签封装
<template>
<li><slot></slot></li>
</template>
<script>
export default {
name: "MenuItem"
}
</script>
SubMenu:结构组件，导入MenuM组件两个实例，实现一个组件对另一个组的单击显示或隐藏
<template>
<MenuM class="title" @click="change">
<slot name="title"></slot> <!--区分插槽 -->
</MenuM>
<MenuM class="sub" v-show="flag" >
<slot></slot>
</MenuM>
</template>
<script>
import MenuM from './MenuM.vue';
export default {
name: "SubMenu",
data() {
return { flag: true };
},
methods: {
change() {
this.flag = !this.flag;
}
},
components: { MenuM }
}
</script>
##ReSubMenu:导入SubMenu,MenuItemx组件，组件递归。
<template>
<SubMenu>
<template v-slot:title><!--#title标识区分插槽-->
<MenuItem>{{list.title}}</MenuItem>
</template>
<template v-if="list.children">
<MenuItem v-for="(child, index) in list.children" :key="index">
<!--ReSubMenu跟name的名字保持一致，递归使用该组件-->
<ReSubMenu :list="child"></ReSubMenu>
</MenuItem>
</template>
</SubMenu>
</template>
<script>
import SubMenu from './SubMenu'
import MenuItem from './MenuItem'
// import MenuM from './MenuM.vue';
export default {
name: "ReSubMenu",//递归组件
props:{
list:{
type:Object,
default:()=>({})
}
},
components:{
SubMenu,
MenuItem,
}
}
</script>
##App:导入ReSubMenu，引入列表数据
<template>
<!-- 数据展示 -->
<div>
<ReSubMenu v-for="menu in menuList" :key="menu.title" :list = "menu"></ReSubMenu>
</div>
</template>
<script>
import ReSubMenu from './components/view/ReSubMenu.vue';
export default {
data(){
return{
//数据模拟
menuList:[
{
title:'网站技术开发',
children:[
{
title:'前端技术',
children:[
{title:'Html5开发技术'},
{title:'javascript开发技术'},
{title:'vue开发技术'},
{title:'route-vue开发技术'},
]
},
{
title:'后端技术',
},
]
},
{
title:'网站安全技术',
children:[
{title:'Linux系统安全'},
{title:'代码审计安全'},
{title:'渗透测试安全'},
]
},
]
}
},
components:{ ReSubMenu},
}
</script>
##最终图
