vue中组件之间的相互调用,及通用后台管理系统左侧菜单树的迭代生成
由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目,在左侧生成菜单树的时候遇到了一些问题。在这里记录下
分析:由于本人设定的菜单可以使多级结构,直接使用vue的v-for 遍历并不是很方便。那么这里采用递归的方式进行菜单树的生成
1.首先在使用vue-cli生成的项目中,在components下新建一个menu.vue组件。
menu.vue的内容为:
<template> <div class="wMenu"> <label v-for="(menu, index) in menuList"> <el-submenu v-if="menu.havingChild" :index="menu.id"> <template slot="title"> <i :class="menu.icon"></i> <span slot="title">{{ menu.menuName }} </template> <wMenu :menuList="menu.children"></wMenu> </el-submenu> <el-menu-item v-if="!menu.havingChild" :index="menu.id"> <i :class="menu.icon"></i> <span slot="title">{{ menu.menuName }} </el-menu-item> </label> </div> </template> <script> export default { name: 'wMenu', props: ['menuList'], data () { return { } }, methods: { getMenuSize() { return this.menuList.length; } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>
这里需要注意的是在第10行的时候,是需要通过我们定义的组件名称调用自己,将子节点的菜单数据传入组件中,实现递归遍历。
2.接下来就要在父组件中调用,也就是我这边定义的layout.vue
首先引入要调用的组件
然后在当前组件中定义使用该组件
接下来就可以直接使用了,
完整代码请到我的github上查看 https://github.com/wylsource/vue-elementui
相关推荐
学习web前端 2020-09-28
小焊猪web前端 2020-09-10
yuzhu 2020-11-16
85477104 2020-11-17
KANSYOUKYOU 2020-11-16
sjcheck 2020-11-03
怪我瞎 2020-10-28
源码zanqunet 2020-10-28
gloria0 2020-10-26
王军强 2020-10-21
QiaoranC 2020-09-25
anchongnanzi 2020-09-21
安卓猴 2020-09-12
Macuroon 2020-09-11
kiven 2020-09-11
LittleCoder 2020-09-11
Cheetahcubs 2020-09-13
颤抖吧腿子 2020-09-04
softwear 2020-08-21