Vue3 项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动
万人都要将火熄灭，我一人独将此火高高举起，我借此火得度一生的茫茫黑夜。 ——海子
和所有以梦为马的诗人一样，我借此火得度一生的茫茫黑夜。 ——海子
前期回顾
0.活在风浪里的博客_CSDN博客-vue2,开源项目,Js领域博主0.活在风浪里擅长vue2,开源项目,Js,等方面的知识,0.活在风浪里关注css,safari,html5,scss,elementui,前端,es6,正则表达式,vue.js,express,ajax,webpack,echarts,json,html,typescript,sass,https,面试,chrome,npm,javascript,xhtml,前端框架,node.js,yarn,css3领域.https://blog.csdn.net/m0_57904695?spm=1001.2101.3001.5343
目录
home.vue
MenuTree.vue (子组件)
结语：
话密了，上硬菜
面试官:如果有多层菜单结构，你怎么把它渲染上去？
第一种使用for循环，是不行的，因为你不确定他有多少层级而且for循环嵌套过多，不易维护，结构不明
第二种: 拿到菜单数据，使用计算属性将由children的有层级的结构出来，将没有层级的也同样给结构出来，这样只是将有子级的和没有子级的菜单给分开了，同样有子级的还是要写多重数循环去循环它，显然又变成了第一种的问题，也不合适
第三种: 使用递归组件，什么是递归组件？就是子组件在运行过程中调用自己，
需求： 顶部展示一级二级菜单，点击顶部二级菜单，如果有三级就在左侧展示二级剩余菜单，使用element-plus
home.vue
0">{{ item.meta.title }}{{ item2.meta.title }}{{ item.meta.title }} MenuTree.vue (子组件)
{{ menu.name }} {{ menu.name }}
直接拷贝就能使用，参考，其实没什么难度，比较简单！
如图有真相
结语：
新年快乐 
kk
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！