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

解决方法
第一种： 看 components:{},单词是否拼错，和不要写成components(){}

第二种：本页面components 看写了几个， 是否是因为覆盖了。只能有一个components:{}

第三种：检查引入的组件 确定是否需要{} , import XXX from "...." 还是 import { XXX } from "...."

第四种：
假如有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
}
1
2
3
或者，在本地注册组件的时候，你可以使用 webpack 的异步 import：

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}
1
2
3
这样问题就解决了！