类型错误：无法读取 Vue2 中未定义的属性“组件”

Question

我在 app.vue 的子集组件中使用 mixins 没有任何问题，一切都很好并且工作正常，但是当我想在 app.vue 组件中使用它时，我在控制台中出现错误。

<script>
/* eslint-disable */
import PanelUser from "./layouts/PanelUser";
import Auth from "./mixins/Auth";
export default {
  name: "App",
  mixins: [Auth],
  components: {
    PanelUser
  },
};
</script>

我也用不了路由器；当我使用它时，页面完全是白色的，没有显示任何内容。

Answer 1

我已经找到了如何检查这种情况。

首先，您可以看到错误抛出到checkComponents方法，移动鼠标并左键单击。

其次，添加断点，然后刷新页面。

第三，也许你会发现一些被引用的 mixin 或组件显示 undefined。就我而言，第二个 mixin 未定义。

最后，检查参考或 mixin 文件。我发现原因是我从另一个文件复制了 mixin 并且忘记在声明部分重命名 mixin。

仅此而已，尝试自己检查。:)

Answer 2

你需要改变：

从“./layouts/PanelUser”导入PanelUser；

到

从“./layouts/PanelUser”导入{PanelUser}；

和

从“./mixins/Auth”导入验证；

到

从“./mixins/Auth”导入{Auth}；

Answer 3

该错误与mixin相关。

确保组件中使用的 mixin 是正确的。（例如名称、esm 导入路径等）

import samplePackage from "sample-package";
import anotherMixin from "another-package/path/to/mixin";

export default {
    mixins: [
        samplePackage.sampleMixin,
        anotherMixin
    ]
}