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

Posted 2023-02-22

【中文标题】引用组件时，Vue“无法访问\'__WEBPACK_DEFAULT_EXPORT__\'”

【英文标题】：Vue "Cannot access '__WEBPACK_DEFAULT_EXPORT__'" when reference a components引用组件时，Vue“无法访问'__WEBPACK_DEFAULT_EXPORT__'”

【发布时间】：2021-01-31 09:52:21

【问题描述】：

我有一个包含四个组件的 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.

不知道是什么问题……

【参考方案1】：

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

Vue.component('A', A);