侧边栏递归组件的使用

 组件长这样

<template>
<template v-for="(menu,index) in menus" :key="menu.path">
      <el-sub-menu :index="menu.path" v-if="menu.children && menu.children.length>1">
      <template #title>
        <el-icon><component :is='menu.meta.icon'></component></el-icon>
        <span>{{menu.meta?.title}}</span>
      </template>  
      <!-- 自己调自己 -->
      <itemMenu :menus="menu.children" />
      <!-- 自己调自己 -->
      </el-sub-menu>
    <el-menu-item :index="menu.path" v-else>
      <el-icon><component :is='menu.meta.icon'></component></el-icon>
      <template #title>{{menu.meta?.title}}</template>
    </el-menu-item>  
</template>
</template>
<script setup>
  defineProps(['menus'])
</script>

在外面使用,传入数据

<template>
 
  <el-menu
    default-active="2"
    class="el-menu"
    :collapse="isfold"
    active-text-color="#409EFF"
    text-color="#fff"   
    :collapse-transition="false"
  >
    <itemMenu :menus="menus"/>
    </el-menu>
</template>