vue中组件之间的相互调用，及通用后台管理系统左侧菜单树的迭代生成
由于本人近期开始学习使用vue搭建一个后端管理系统的前端项目，在左侧生成菜单树的时候遇到了一些问题。在这里记录下
分析：由于本人设定的菜单可以使多级结构，直接使用vue的v-for 遍历并不是很方便。那么这里采用递归的方式进行菜单树的生成
1.首先在使用vue-cli生成的项目中，在components下新建一个menu.vue组件。
menu.vue的内容为：
- 1 <template>
- 2 <div class="wMenu">
- 3 <label v-for="(menu, index) in menuList">
- 4
- 5 <el-submenu v-if="menu.havingChild" :index="menu.id">
- 6 <template slot="title">
- 7 <i :class="menu.icon"></i>
- 8 <span slot="title">{{ menu.menuName }}</span>
- 9 </template>
- 10 <wMenu :menuList="menu.children"></wMenu>
- 11 </el-submenu>
- 12
- 13 <el-menu-item v-if="!menu.havingChild" :index="menu.id">
- 14 <i :class="menu.icon"></i>
- 15 <span slot="title">{{ menu.menuName }}</span>
- 16 </el-menu-item>
- 17 </label>
- 18 </div>
- 19 </template>
- 20
- 21 <script>
- 22 export default {
- 23 name: 'wMenu',
- 24 props: ['menuList'],
- 25 data () {
- 26 return {
- 27 }
- 28 },
- 29 methods: {
- 30 getMenuSize() {
- 31 return this.menuList.length;
- 32 }
- 33 }
- 34 }
- 35 </script>
- 36
- 37 <!-- Add "scoped" attribute to limit CSS to this component only -->
- 38 <style scoped>
- 39
- 40 </style>
这里需要注意的是在第10行的时候，是需要通过我们定义的组件名称调用自己，将子节点的菜单数据传入组件中，实现递归遍历。
2.接下来就要在父组件中调用，也就是我这边定义的layout.vue
首先引入要调用的组件
然后在当前组件中定义使用该组件
接下来就可以直接使用了，
完整代码请到我的github上查看 https://github.com/wylsource/vue-elementui
版权声明：本文为longjee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。