Mutual calling of components in vue and iterative generation of menu tree on the left side of general background management system

Because I started to learn to build a front-end project of a back-end management system using vue recently, I encountered some problems when generating menu tree on the left. Record it here

Analysis: because the menu I set can make multi-level structure, it is not very convenient to directly use v-for traversal of vue. In this case, recursion is used to generate the menu tree

1. First, in the project generated by using Vue cli, create a new menu.vue component under components.

The contents of menu.vue are:

 1 <template>
 2   <div class="wMenu">
 3      <label v-for="(menu, index) in menuList">
 5        <el-submenu v-if="menu.havingChild" :index="">
 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>
13        <el-menu-item  v-if="!menu.havingChild" :index="">
14          <i :class="menu.icon"></i>
15          <span slot="title">{{ menu.menuName }}</span>
16        </el-menu-item>
17     </label>
18   </div>
19 </template>
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>
37 <!-- Add "scoped" attribute to limit CSS to this component only -->
38 <style scoped>
40 </style>

It should be noted that in line 10, we need to call ourselves through the component name we defined, and pass the menu data of the child node into the component to realize recursive traversal.


2. next is called in the parent component, which is the layout.vue defined on my side.

First introduce the component to be called

Then define the use of this component in the current component

Then you can use it directly,


Please check the complete code on my github

Tags: Javascript Vue github Attribute

Posted on Mon, 04 May 2020 06:00:08 -0700 by sergio-pro