Vue“引用组件时无法访问'__WEBPACK_DEFAULT_EXPORT__'”

Question

我有一个包含四个组件的 Vue 应用程序：

A B C D

在特定模板中我遇到这种情况：

A 嵌套在 D 嵌套在 C 嵌套在 B 嵌套在 A

但是当我执行该页面时，我收到此错误：

Uncaught ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization
at Module.default (VM989 A.vue:3)
at eval (C.ts:37)
at Object../src/C.ts (bundle.js?v=Eyk_ReZs3kIu049BgV_w3FBVLlup9glNBHL1Wa04y2A:548)

如果我改变这部分：

@Component({
    name: 'C',
    components: {
        'A': A
    }
})
export default class C extends Vue { }

以这种（错误的）方式：

@Component({
    name: 'C',
    components: {
    }
})
export default class C extends Vue { }

页面加载但我收到此（正确）错误：

[Vue warn]: Unknown custom element: <dataform> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我不知道是什么问题...

Answer 1

我处于循环依赖关系（https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components），解决方案是从装饰器中删除组件声明并创建全局参考：

Vue.component('A', A);