Vue动态组件绑定ComponentType3遇问题：渲染异常与循环引用

问题原因 #

当getComponentName返回ComponentType3时，Vue无法识别这个组件——因为它没在当前组件的components选项中注册；而直接导入自身会触发循环引用报错，导致组件无法正常加载，最终Vue将其解析为普通HTML标签输出。

解决方案：异步局部注册自身组件 #

通过异步组件的方式注册ComponentType3，Vue会延迟加载组件，从而避免循环引用问题。具体修改如下：

1. 在components选项中添加异步注册的ComponentType3
2. 修复模板中<component>标签的闭合语法问题

修改后的ComponentType3.vue代码：

<script>
import ComponentType1 from './ComponentType1.vue';
import ComponentType2 from './ComponentType2.vue';
export default {
    props: ['initModel'],
    data() {
        return {
            model: this.initModel
        }
    },
    components: {
        ComponentType1,
        ComponentType2,
        // 异步注册自身，规避循环引用
        ComponentType3: () => import('./ComponentType3.vue')
    },
    methods: {
        getComponentName(type) {
            return 'Component' + type;
        }
    }
}
</script>
<template>
    <!-- 修复标签闭合问题 -->
    <component v-bind:is="getComponentName(model['Type'])"></component>
</template>

注意事项 #

• 必须设置递归终止条件：如果model['Type']持续返回3，会引发组件无限递归渲染，最终导致栈溢出。需要在业务逻辑中控制Type的取值，避免无限递归。
• 异步组件只会在首次需要时加载一次，不会重复触发请求或加载逻辑。

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