【报错信息】Unknown custom element: <组件名> - did you register the component correctly?
可能的原因如下:
- 组件名字是否写对了
- import xxx from “./xxx.vue” 写成了import { xxx} from “./xxx.vue”
- 代码中有两个components,后一个的值把前一个覆盖了
- 组件直接循环套用了
第四种情况的说明:
假如有A,B两个组件,渲染A组件的时候,A组件中引入了B组件显示,在渲染B组件的时候又引入了A组件,会导致控制台一直报是否正确注册了组件的错误。
第四种情况的解决方案:
【方案一】
在我们的例子中,把 组件设为了那个点。我们知道那个产生悖论的子组件是 组件,所以我们会等到生命周期钩子 beforeCreate 时去注册它:
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}
【方案二】
或者,在本地注册组件的时候,你可以使用 webpack 的异步 import:
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}