vue组件间的循环引用

起因

Vue出现报错： Unknown custom element: < xxxxx > - did you register the component correctly? For recursive components, make sure to provide the “name” option.

出现这个报错，我们的第一反应是 import了吗？components里面添加了吗？亦或者是路径写对了吗？一番检查之后发现都是对的，为什么会报错？

尝试

import A from "./A";
console.log(A)             // A不存在！

import A from "./A";
setTimeout(() => {
	Vue.component(A.name, name);
}, 3000);
//此时页面呈现了，并且没有报错

看看你的组件是否存在循环引用！

查询了Vue的官方文档之后，Vue对此现象解释为

当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！为了解释这里发生了什么，我们先把两个组件称为 A 和 B。模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。

解决办法

方法1：在main.js中全局引入并注册A和B组件

方法2：在本地注册组件的时候，你可以使用 webpack 的异步 import：

  components: {
  	B: () => import('./B.vue')
  }

方法3：等到生命周期钩子 beforeCreate 时去注册它

beforeCreate: function () {
  this.$options.components.B = require('./B.vue').default
}

那么下次产生这个报错的时候我们是不是应该多一种需要检查的情况了？