VUE3项目--组件递归调用自身

在组件中递归调用自身时，一定要给组件起个名字。

<script lang="ts">
// 组件的递归调用，需要为组件定义一个名字
export default {
  name: 'GGMenu'
}
</script>

下面是组件的完整代码

<template>
  <template v-for="menu in menuList" :key="menu.path">
    <template v-if="!menu.children">
      <el-menu-item v-if="!menu.meta.hidden" :index="menu.path">
        <template #title>
          <el-icon>
            <component :is="menu.meta.icon"></component>
          </el-icon>
          <span>{{ menu.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <template v-if="menu.children && menu.children.length == 1">
      <el-menu-item
        v-if="!menu.children[0].hidden"
        :index="menu.children[0].path"
      >
        <template #title>
          <el-icon>
            <component :is="menu.children[0].meta.icon"></component>
          </el-icon>
          <span>{{ menu.children[0].meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
    <template v-if="menu.children && menu.children.length > 1">
      <el-sub-menu v-if="!menu.meta.hidden" :index="menu.path">
        <template #title>
          <el-icon>
            <component :is="menu.meta.icon"></component>
          </el-icon>
          <span>{{ menu.meta.title }}</span>
        </template>
        <!-- Menu组件的自身的递归调用 -->
        <GGMenu :menu-list="menu.children"></GGMenu>
      </el-sub-menu>
    </template>
  </template>
</template>

<script setup lang="ts">
// 获取父组件传递过来的全部路由数组
defineProps(['menuList'])
</script>
<script lang="ts">
// 组件的递归调用，需要为组件定义一个名字
export default {
  name: 'GGMenu'
}
</script>

<style lang="scss" scoped></style>