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

MenuTree.vue (子组件)

直接拷贝就能使用，参考，其实没什么难度，比较简单！

如图有真相

---

结语：

新年快乐 kk

​​​​​​​​​​​​​​