Vue 3 CDN 环境下实现递归组件的正确方法-html教程-PHP中文网

Vue 3 CDN 环境下实现递归组件的正确方法

在 Vue 3 仅通过 CDN 引入（无构建工具）的场景中，模板语法无法直接支持自引用递归组件（如），必须改用 h() 函数 + defineComponent 的组合式 API 显式声明递归调用。

在 vue 3 仅通过 cdn 引入（无构建工具）的场景中，模板语法无法直接支持自引用递归组件（如 ``，必须改用 `h()` 函数 + `definecomponent` 的组合式 api 显式声明递归调用。

Vue 3 的 CDN 版本（vue.global.js）虽支持 Options API 和 Composition API，但其模板编译器在运行时对动态组件名字符串（如 is="menu-comp"）的解析存在限制：它无法在未注册全局组件或未显式声明依赖关系的前提下，完成跨层级的组件自我引用，导致递归中断、仅渲染首层节点，并将子组件退化为原生 HTML 标签（如被当作普通标签保留）。

要解决该问题，核心思路是绕过模板编译阶段的名称解析，直接在 JavaScript 层面构造 VNode 树。推荐使用 defineComponent 配合 h() 函数编写函数式渲染逻辑，明确传递组件自身作为子节点的构造器：

<script type="module">
const { createApp, defineComponent, ref, h } = Vue;

const MenuComp = defineComponent({
  name: "MenuComp", // 必须显式命名，便于调试与 DevTools 识别
  props: ["item"],
  setup(props) {
    return () => h("li", [
      props.item.menuName,
      props.item.subMenu && props.item.subMenu.length > 0
        ? h(
            "ul",
            props.item.subMenu.map(sub => 
              h(MenuComp, { item: sub, key: sub.id })
            )
          )
        : null
    ]);
  }
});

const app = createApp({
  setup() {
    const message = ref([
      {
        menuName: "首页",
        id: 1,
        subMenu: [
          { menuName: "仪表盘", id: 11, subMenu: [] },
          { 
            menuName: "系统管理", 
            id: 12, 
            subMenu: [
              { menuName: "用户管理", id: 121, subMenu: [] },
              { menuName: "角色管理", id: 122, subMenu: [] }
            ] 
          }
        ]
      }
    ]);
    return { message };
  },
  components: { "menu-comp": MenuComp }
}).mount("#app");
</script>

✅ 关键要点说明：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

h() 是 Vue 3 的底层渲染函数，返回 VNode，完全规避模板解析限制；
MenuComp 在 h() 调用中直接作为参数传入，形成闭包内显式递归，无需依赖组件注册名字符串；
每个递归层级必须传入唯一 key（如 sub.id），否则 Vue 会警告并可能复用错误节点；
props.item.subMenu && ...length > 0 判断更健壮，避免 undefined 或 null 导致 .map 报错；
name 选项非必需，但强烈建议添加，便于 Vue DevTools 调试和错误堆栈定位。