vue3递归菜单组件

精简版，递归组件的重点就是直接用该页面的名字当组件用
父组件

<template>
	<el-menu>
         <menuTree :menuList="menuArr" @goPage="goPage"></menuTree>
     </el-menu>
</template>

<script setup lang="ts">
import menuTree from './menuTree.vue' //子组件
menuArr:Array = [];//菜单数据

const goPage = () => {
   console.log('父组件')
};

</script>

子组件，文件名 menuTree

<!-- 递归组件 -->
<template>
    <template v-for="item in menuList" :key="item.id">
        <template v-if="item.childer">
                <!-- 直接用该组件的名字就行 -->
                <menuTree :menuList="item.childer" @goPage="goPage"></menuTree>
        </template>
        <template v-else>
            <template #title>{{ item.name }}</template>
        </template>
    </template>
</template>

<script setup lang="ts">
    type Menu = {
        name:string,
        path:string,
        icon?:string,
        childer?:Menu[],
        id:number,
        [xxx:any]:any
    }
    type Props = {
        menuList:Menu[]
    }
   defineProps<Props>()
   
   const emits = defineEmits(['goPage']);
   
    const goPage = () => {
        emits('goPage');
    };
</script>