Vue如何实现嵌套菜单组件(vue,开发技术)

本文旨在使用Vue.js完成一个嵌套的菜单组件，使用mock.js对数据进行模拟，并且最小化复现功能

安装mock

cnpm i mockjs

//引入mockjsimportMockfrom'mockjs'//使用mockjs模拟数据Mock.mock('/menuData','get',{"ret":0,"data":[{"id":1,"name":"第一层","children":[{"name":"第二层"},{"name":"第二层"},{"name":"第二层"}]},{"id":2,"name":"第一层","children":[{"name":"第二层"},{"id":3,"name":"第二层","children":[{"name":"第三层"},{"name":"第三层"},{"name":"第三层"}]},{"id":4,"name":"第二层","children":[{"name":"第三层"},{"name":"第三层"},{"id":5,"name":"第三层","children":[{"name":"第四层"},{"name":"第四层"},{"id":6,"name":"第四层","children":[{"name":"第五层"},{"name":"第五层"},{"name":"第五层"}]}]}]}]}]});

菜单组件

<!--*@Author:byron*@Date:2022-02-2409:01:27*@LastEditTime:2022-02-2410:50:38--><template><div><ulclass="menu"v-for="itemindata":key="item.id"><liclass="subMenu"@click="showhd(item)":class="[item.children?'color':'']"><span>{{item.name}}{{item.id}}</span></li><divclass="child"v-if="item.id==currentId&&openFlag"><xxxxv-if="item.children":data="item.children"></xxxx></div></ul></div></template><script>exportdefault{name:'xxxx',components:{},props:['data'],data(){return{currentId:undefined,openFlag:false,}},methods:{showhd(a){console.log(this.openFlag)this.openFlag=!this.openFlagthis.currentId=a.idconsole.log(this.currentId)console.log(this.openFlag)},},}</script><stylescoped>li{text-decoration:none;/*list-style:none;*/}.ul{overflow:hidden;}.head{display:none;}.show{display:block;}.color{color:brown;}</style>

使用菜单组件

<template><divid="app"><h2>嵌套组件的实现</h2><HelloWorld:data="menu"/></div></template><script>importHelloWorldfrom'./components/HelloWorld.vue'importaxiosfrom'axios'exportdefault{name:'App',components:{HelloWorld,},data(){return{menu:[],}},asynccreated(){const{data:r}=awaitaxios.get('/menuData')this.menu=r.dataconsole.log(this.menu)},}</script><style>#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}</style>