基于vue和element-ul实现后台管理系统侧边栏递归实现思路

父组件

<template>
  <div>
    <h1 class="navtitle">后台管理系统</h1>
    <el-menu :router="true" background-color="#001529" text-color="#fff" class="navleft" unique-opened>
        <!-- 先循环数组，然后把每一项的值给传到子组件内  因为不能直接传数组，要传值 -->
        <menus v-for="(item,index) in menuData" :key="index" :menu="item"></menus>
    </el-menu>
  </div>
</template>

<script>
import {get} from "@/utils/http"
import menus from './menus.vue';
export default {
    data(){
        return{
            menuData:[]
        }
    },
    components: {
       menus 
    },
    created(){
      //把menu接口内的data数组放到menuData内
        get("/menu").then((res)=>{
            this.menuData=res.data
        })
    }
};


</script>

<style lang="less" scoped>
.navleft{overflow: hidden;}
.navtitle{color: #fff;font-size: 18px;}
/deep/.el-menu{border-right: none;}
</style>



           

子组件

<template>
    <div>
        <!-- 判断渲染submenu还是menu-item -->
        <!-- 如果menu内有子集就渲染sub否则item。index放url可以在路由开始后直接点击跳转，不需要在一个个设置 -->
        <el-submenu v-if="menu.children" :index="menu.url">
            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{menu.name}}</span>
            </template>
            <!-- 组件name可以用来自己调用自己， -->
            <nav-menu v-for="(item,index) in menu.children" :menu="item" :key="index"></nav-menu>
        </el-submenu>
        <el-menu-item v-else :index="menu.url">
            <i :class="menu.icon"></i>
            <span slot="title">{{menu.name}}</span>
        </el-menu-item>
    </div>
</template>

<script>
    export default {
        //取名，用来自我调用
        name:"navMenu",
        props:{
            //接收父组件传来的值，规定要是对象形式的，必传项
            //menu就是传过来的每一项的对象
            menu:{
                type:Object,
                required:true
            }
        }
    }
</script>

<style lang="less" scoped>

</style>
           

//总结：

// 1，后端给个导航栏的数据

// 2，创建一个子组件并注册在父组件内

// 3，在父组件创建一个空数组，利用生命周期加载后自动把后端的数据存到空数组内。

// 4，把父组件的数组传给子组件，因为不能直接传数组，要传值，所以通过在父组件内的子组件上for循环把每一项作为值传过去。

// 5，子组件判断用不用submenu，用v-if判断，条件是接收到的数组也就是menu（代表每一项）是否有children（子级）,有就用submenu没有就item。

// 6，子组件内index用menu.url。因为开启路由模式为true后可以让index内的地址直接用于跳转，免得后期一个个加。

// 7，子组件内submenu内放子组件(name名字)自己调用自己，渲染出二级菜单，想要自己调用自己，需要给组件一个name取名字，用名字当标签名渲染。

//整理：通过获取后端数据到数组，然后循环数组把内容渲染到页面，中间通过if看有无子级 判断有就submenu(二级菜单)没有就直接渲染(一级菜单)。