是什么为什么怎么做

递归组件就是指组件在模板中调用自己，开启递归组件的必要条件，就是在组件中设置一个 name 选项。
以后天管理的左侧菜单栏为例
代码如下：

  1. // menu/index.vue
  3. <template>
  4.   <template v-for="(item, index) in menuList" :key="item.path">
  5.     <!-- 没有子路由 -->
  6.     <template v-if="!item.children">
  7.       <el-menu-item v-if="!item.meta.hidden" :index="item.path">
  8.     <template #title>
  9.     <span>标&nbsp;</span>
  10.     <span>{{ item.meta.title }}</span>
  11.     </template>
  12.     </el-menu-item>
  13.     </template>
  14.     <!-- 有子路由，但是只有一个 -->
  15.     <template v-if="item.children && item.children.length == 1">
  16.       <el-menu-item v-if="!item.children[0].meta.hidden" :index="item.children[0].path">
  17.     <template #title>
  18.     <span>{{ item.children[0].meta.title }}</span>
  19.     </template>
  20.     </el-menu-item>
  21.     </template>
  22.     <!-- 有子路由，且个数大于1个 -->
  23.     <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1">
  24.     <template #title>
  25.     <span>{{ item.meta.title }}</span>
  26.     </template>
  27.     <!-- 递归组件 -->
  28.     <Menu :menuList="item.children"></Menu>
  29.     </el-sub-menu>
  30.     </template>
  31.     </template>
  32.     <script lang="ts">
  33. import { defineComponent } from 'vue'
  34. export default defineComponent({
  35.   name: 'Menu',
  36. })
  37.   </script>
  38.   <script lang="ts" setup>
  39.   // 接受父组件传递的全部路由数据
  40.   defineProps(['menuList'])
  41.   </script>
  43.   <style lang="scss" scoped></style>

在进行递归组件是，主要使用的是插槽来实现数据的传递。

  1. // layout/index.vue 
  3. // 样式变量是在style文件中定义的变量
  5. <template>
  6.   <div class="layout_container">
  7.     <!-- 左侧菜单 -->
  8.     <div class="layout_slider">
  9.       <Logo></Logo>
  10.       <!-- 展示菜单 -->
  11.       <!-- 滚动组件 -->
  12.       <el-scrollbar class="scrollbar">
  13.         <!-- 菜单组件 -->
  14.         <el-menu background-color="#001529" text-color="#fff">
  15.           <Menu :menuList="userStore.menuRoutes"></Menu>
  16.         </el-menu>
  17.       </el-scrollbar>
  18.     </div>
  19.     <!-- 顶部导航 -->
  20.     <div class="layout_tabbar">456</div>
  21.     <!-- 内容展示区 -->
  22.     <div class="layout_main">
  23.       <!-- <p style="height: 3000px">789</p> -->
  24.     </div>
  25.   </div>
  26. </template>
  27. <script lang="ts">
  28. import { defineComponent } from 'vue'
  29. export default defineComponent({
  30.   name: 'Layout',
  31. })
  32. </script>
  33. <script lang="ts" setup>
  34. // 引入左侧菜单子组件
  35. import Logo from './logo/index.vue'
  36. // 引入菜单组件
  37. import Menu from './menu/index.vue'
  38. // 获取用户相关的小仓库
  39. import useUserStore from '@/store/user'
  40. const userStore = useUserStore()
  41. </script>
  43. <style lang="scss" scoped>
  44. .layout_container {
  45.   width: 100%;
  46.   height: 100vh;
  47.   // background-color: #e84a4a;
  48.   .layout_slider {
  49.     width: $base-menu-width;
  50.     height: 100vh;
  51.     background-color: $base-menu-background;
  52.     .scrollbar {
  53.       width: 100%;
  54.       height: calc(100vh - $base-menu-logo-height);
  55.       .el-menu {
  56.         border-right: none;
  57.       }
  58.     }
  59.   }
  60.   .layout_tabbar {
  61.     position: fixed;
  62.     top: 0px;
  63.     left: $base-menu-width;
  64.     width: calc(100% - $base-menu-width);
  65.     height: $base-tabber-height;
  66.     background-color: #45c1ea;
  67.   }
  68.   .layout_main {
  69.     position: absolute;
  70.     width: calc(100% - $base-menu-width);
  71.     height: calc(100vh - $base-tabber-height);
  72.     background-color: #48ca62;
  73.     left: $base-menu-width;
  74.     top: $base-tabber-height;
  75.     padding: 20px;
  76.     overflow: auto;
  77.   }
  78. }
  79. </style>

插槽

插槽又分为具名插槽、匿名插槽、自定义插件，经常用于组件的封装