【快速入门Vue系列】第十七篇：组件之间的循环引用，你知道吗？
循环引用
递归组件
组件是可以在它们自己的模板中调用自身的，不过它们只能通过name选项来做这件事：
name: 'my-cmp' 复制代码
不过当使用 Vue.component 全局注册一个组件时，全局的ID会自动设置为该组件的 name 选项。
Vue.component('my-cmp', { /** */ }); 复制代码稍有不慎，递归组件就可能导致无限循环：
name: 'my-cmp', template: `<div><my-cmp /></div>` 复制代码
类似上述的组件将会导致“max stack size exceeded”错误，所以要确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。
组件之间的循环引用
有时，在去构建一些组件时，会出现组件互为对方的后代/祖先:
Vue.component('cmp-a', { template: ` <div> <cmp-b></cmp-b> </div> ` }) 复制代码Vue.component('cmp-b', { template: ` <div> <cmp-a></cmp-a> </div> ` }) 复制代码此时，我们使用的是全局注册组件，并不会出现悖论，但是如果使用的为局部组件就会出现悖论。
但是即使用了全局注册组件，在使用webpack去导入组件时，也会出现一个错误：Failed to mount component: template or render function not defined。
模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题，我们需要给模块系统一个点：“A 反正是需要 B 的，但是我们不需要先解析 B。”
beforeCreate () { this.$options.components.CmpB = require('./tree-folder-contents.vue').default; } 复制代码或者，在本地注册组件的时候，你可以使用 webpack 的异步 import：
components: { CmpB: () => import('./tree-folder-contents.vue') }
作者：前端老实人
链接：https://juejin.cn/post/7026596978393874462