Vue3 組件遞歸

父組件調用 sub-menu 子組件

1. 引入子組件模板 import SingleFileRecursiveSubMenu from "@/components/menus/SingleFileRecursiveSubMenu"; 

2. 注冊子組件 'sub-menu': SingleFileRecursiveSubMenu

3. 使用子組件 <sub-menu :menu-info="item" :key="item.cddm" />

<template>
  <div>
    <a-menu
      mode="inline"
      class="h-100 w-100"
      theme="dark"
      :subMenuOpenDelay="1"
      @click="handleClick"
    >
      <template v-for="item in menuItems" :key="item.cddm">
        <template v-if="!item.children">
          <a-menu-item :key="item.cddm">{{ item.cdmc }}</a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.cddm" />
        </template>
      </template>
    </a-menu>
  </div>
</template>

<script>

import { ref, reactive } from "vue";
import SingleFileRecursiveSubMenu from "@/components/menus/SingleFileRecursiveSubMenu";

const componentsMixin = {
  components: {
    'sub-menu': SingleFileRecursiveSubMenu,
  },
};

子組件遞歸調用自身

使用組件中的 name 屬性

<template>
  <div>
    <a-sub-menu :key="menuInfo.cddm">
      <template #title>{{ menuInfo.cdmc }}</template>
      <template v-for="item in menuInfo.children" :key="item.cddm">
        <template v-if="!item.children">
          <a-menu-item :key="item.cddm">{{ item.cdmc }}</a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.cddm" />
        </template>
      </template>
    </a-sub-menu>
  </div>
</template>
<script>
import { toRefs } from "vue";

export default {
  name: "sub-menu",
  props: ['menuInfo'],
  setup(props) {
    const {menuInfo} = toRefs(props)
    return {
      menuInfo
    };
  },
};
</script>