基于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(二級菜單)沒有就直接渲染(一級菜單)。