Vue3 CDN环境下递归组件无法渲染的解决方案咨询

问题描述 #

在Vue3 CDN构建的项目中，尝试创建递归组件时，仅能渲染顶层元素，子组件无法正常解析，页面中直接显示未编译的<menu-comp>标签。

可行解决方案 #

1. 给递归组件添加自身引用 #

CDN模式下组件不会自动全局注册，递归调用时组件内部无法找到自身定义，必须在组件的components选项中主动注册自己。修改后的组件代码如下：

const MenuComp = {
    template: `
        <li>{{ item.menuName }}
            <ul v-if="item.subMenu && item.subMenu.length>0">
                <menu-comp v-for="subs in item.subMenu" :key="subs.id" :item="subs"></menu-comp>
            </ul>
        </li>
    `,
    props: ['item'],
    components: {
        'menu-comp': MenuComp // 关键：注册自身以支持递归调用
    }
}

2. 简化递归调用写法 #

无需使用<component is="menu-comp">标签，直接使用组件的注册名<menu-comp>即可，避免额外的组件查找逻辑问题。

3. 确认数据结构有效性 #

确保接口返回的subMenu字段是数组类型，且包含有效的子菜单数据。可以在getMenus回调中打印data.results，检查每个item的subMenu是否为非空数组，必要时添加空值判断（如v-if="item.subMenu && item.subMenu.length>0"）。

修改后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Form Example</title>
</head>
<body>
<div id="app">
    <ul>
        <menu-comp v-for="item in message" :key="item.id" :item="item"></menu-comp>
    </ul>
</div>

</body>

<script type="module">
    const {createApp, ref, } = Vue
    const MenuComp = {
        template: `
            <li>{{ item.menuName }}
                <ul v-if="item.subMenu && item.subMenu.length>0">
                    <menu-comp v-for="subs in item.subMenu" :key="subs.id" :item="subs"></menu-comp>
                </ul>
            </li>
        `,
        props: ['item'],
        components: {
            'menu-comp': MenuComp
        }
    }
    const app = createApp({
        setup() {
            const message = ref([])
            return {
                message
            }
        },
        mounted() {
            this.getMenus();
        },
        components: {
            "menu-comp": MenuComp,
        },

        methods: {
            getMenus() {
                // 可先使用模拟数据验证组件逻辑
                // this.message = [
                //     {id:1, menuName:'test1', subMenu:[{id:11, menuName:'subtest1', subMenu:[]}]},
                //     {id:2, menuName:'test2', subMenu:[]}
                // ];
                axios.get('/api/menu', {
                    contentType: "application/json; charset=UTF-8",
                }).then(r => {
                    const {data} = r;
                    this.message = data.results;
                    console.log(data.results);
                });
            }
        }
    }).mount('#app')

</script>
</html>

内容的提问来源于stack exchange，提问作者user3666070