递归组件

组件是可以在它们自己的模板中调用自身的，不过它们只能通过name选项来做这件事：

  1. name: 'my-cmp'

不过当使用 Vue.component 全局注册一个组件时，全局的ID会自动设置为该组件的 name 选项。

  1. Vue.component('my-cmp', { /** */});

稍有不慎，递归组件就可能导致无限循环：

  1. name: 'my-cmp',
  2. template: `<div><my-cmp /></div>`

类似上述的组件将会导致“max stack size exceeded”错误，所以要确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。

组件之间的循环引用

有时，在去构建一些组件时，会出现组件互为对方的后代/祖先:

  1. Vue.component('cmp-a', {
  2.   template: `
  3.     <div>
  4.       <cmp-b></cmp-b>
  5.     </div>
  6.   `
  7. })
  1. Vue.component('cmp-b', {
  2.   template: `
  3.     <div>
  4.       <cmp-a></cmp-a>
  5.     </div>
  6.   `
  7. })

此时，我们使用的是全局注册组件，并不会出现悖论，但是如果使用的为局部组件就会出现悖论。
但是即使用了全局注册组件，在使用webpack去导入组件时，也会出现一个错误：Failed to mount component: template or render function not defined。
模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题，我们需要给模块系统一个点：“A 反正是需要 B 的，但是我们不需要先解析 B。”

  1. beforeCreate () {
  2.   this.$options.components.CmpB = require('./tree-folder-contents.vue').default;
  3. }

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

  1. components: {
  2.   CmpB: () => import('./tree-folder-contents.vue')
  3. }