Vue3递归组件——以menu菜单为例(个人笔记)

背景：我们在用element ui 写菜单导航组件的时候，很可能在开发的时候不知道以后会嵌套多少层，如果每添加一层就到菜单组件中嵌套多一层代码，不仅麻烦而且会导致代码冗余。

封装Sidebar组件

父组件Sidebar.vue

<template>
<div>
    <el-menu :default-active="defaultActive" class="sidebar_menu" router unique-opened @open="handleOpen" @close="handleClose">
        <!-- el-sub-menu和el-menu-item 可能会有多层嵌套，所以抽取出来封装成递归组件-->
        <SidebarMenu :routes="routes"></SidebarMenu>
    </el-menu>
</div>
</template>

<script setup>
    import SidebarMenu from './components/SidebarMenu.vue';
    import { ref, watch } from 'vue'
    import { useRoute } from 'vue-router'
    const $route = useRoute()
    const routes = $http.getRoutes() // 假设菜单权限从接口返回
    // 默认选中菜单
    const defaultActive = ref('')
    watch(() => $route.fullPath, (newVal) => {
        defaultActive.value = newVal
    }, {
        immediate: true
    })
    function handleOpen() {}
    function handleClose() {}
</script>

子组件SidebarMenu.vue

<template>
    <template v-for="(item,ind) in routes" :key="ind">
        <el-sub-menu :index="item.fullPath" v-if="item.children && item.children.length">
            <template #title>
                <span>{{item.name}}</span>
            </template>
            <SidebarMenu :routes="item.children"></SidebarMenu>
        </el-sub-menu>
        <el-menu-item :index="item.fullPath" v-else>
            <span>{{item.name}}</span>
        </el-menu-item>
    </template>
</template>
<script setup name="SidebarMenu"> // 递归组件，在script添加name属性，然后可以在模板中直接使用
    const props = defineProps({
        routes: {
            type: Array,
            default: []
        },
    })
</script>

到这里，菜单就可以根据路由来进行展示了，不管嵌套多少层都可以正常展示。