报错Unknown custom element: <组件名> - did you register the component correctly?的原因及解决办法

问题

Unknown custom element: - did you register the component correctly?
在这里插入图片描述

原因

  1. 组件名字是否写对了
  2. import xxx from “./xxx.vue” 写成了import { xxx} from “./xxx.vue”
  3. 代码中有两个components,后一个的值把前一个覆盖了
  4. 组件直接循环套用了

解决(第四种)

假如有A,B两个组件,渲染A组件的时候,A组件中引入了B组件显示,在渲染B组件的时候又引入了A组件,会导致控制台一直报是否正确注册了组件的错误。

组件循环嵌套引发的问题。官方文档也有说明,官方组件循环引用

官方给出的解决方法:

模块系统发现它需要 A,但是首先 A 依赖 B,但是 B 又依赖 A,但是 A 又依赖 B,如此往复。这变成了一个循环,不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题,我们需要给模块系统一个点,在那里“A 反正是需要 B 的,但是我们不需要先解析 B。”

在我们的例子中,把 组件设为了那个点。我们知道那个产生悖论的子组件是 组件,所以我们会等到生命周期钩子 beforeCreate 时去注册它:

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

或者,在本地注册组件的时候,你可以使用 webpack 的异步 import:

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

这样问题就解决了!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐