VueJS递归嵌套组件中ComponentB内的ComponentA无法渲染报错如何解决

你遇到的是Vue的循环组件引用问题，两个组件互相导入注册时触发了模块加载的依赖循环，导致ComponentB初始化时拿到的ComponentA是未完成导出的无效值，所以内部嵌套的ComponentA注册失败无法渲染。

解决方案 #

方案1：异步组件注册（最简便，推荐使用）

修改ComponentB的组件注册逻辑，将ComponentA改为异步导入形式，避开初始化阶段的依赖循环：

import ComponentC from "./ComponentC.vue"
export default Vue.extend({
    name: "ComponentB",
    //...
    components: {
        // 异步导入会等到组件实际渲染时才加载模块
        ComponentA: () => import('./ComponentA.vue'),
        ComponentC
    }
})

方案2：生命周期内手动注册

在ComponentB的beforeCreate钩子中手动注册ComponentA：

import ComponentC from "./ComponentC.vue"
export default Vue.extend({
    name: "ComponentB",
    beforeCreate() {
        this.$options.components.ComponentA = require('./ComponentA.vue').default
    },
    //...
    components: {
        ComponentC
    }
})

方案3：全局注册两个组件（适合高频复用的通用组件）

在项目入口文件全局注册这两个组件，全局注册不受模块间循环依赖影响：

import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
Vue.component('ComponentA', ComponentA)
Vue.component('ComponentB', ComponentB)

额外注意 #

如果你的嵌套逻辑没有终止条件，会出现无限递归渲染导致页面崩溃，建议新增level类的props控制嵌套层级，达到指定层级后停止渲染子ComponentA。

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