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