Vue中怎么递归多级菜单
Vue中怎么递归多级菜单,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联建站专注于朔城网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供朔城营销型网站建设,朔城网站制作、朔城网页设计、朔城网站官网定制、成都微信小程序服务,打造朔城网络公司原创品牌,更为您提供朔城网站排名全网营销落地服务。
考虑以下菜单数据:
[ { name: "About", path: "/about", children: [ { name: "About US", path: "/about/us" }, { name: "About Comp", path: "/about/company", children: [ { name: "About Comp A", path: "/about/company/A", children: [ { name: "About Comp A 1", path: "/about/company/A/1" } ] } ] } ] }, { name: "Link", path: "/link" } ];
需要实现的效果:
首先创建两个组件 Menu 和 MenuItem
// Menuitem
MenuItem 是一个 li 标签和 slot 插槽,允许往里头加入各种元素
Menu 组件外层是一个 ul 标签,内部是 vFor 遍历生成的 MenuItem
这里有两种情况需要做判断,一种是 item 没有 children 属性,直接在 MenuItem 的插槽加入一个 span 元素渲染 item 的 title 即可;另一种是包含了 children 属性的 item 这种情况下,不仅需要渲染 title 还需要再次引入 Menu 做递归操作,将 item.children
作为路由传入到 router prop
最后在项目中使用:
最后增加一些样式:
MenuItem:
Menu:
Menu 中 ul 标签内的代码可以单独提取出来,Menu 作为 wrapper 使用,递归操作部分的代码也可以单独提取出来
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。
本文标题:Vue中怎么递归多级菜单
文章转载:http://myzitong.com/article/gcdcoe.html