vue 递归组件

递归组件的定义

• 每个组件都有一个name属性。当你注册全局组件的时候这个全局的ID会设置成这个组件的name属性
• 递归组件容易 陷入无限循环中，所以使用递归最好是要有条件性的

Vue.component('unique-name-of-my-component', {
  // ...
})
这时候组件名就是组件的name

无限递归死循环的组件，当出现这样的情况会报max stack size exceede 的错误
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

组件之间的循环引用

• 如下当父组件传递的值childer存在的时候就会继续调用父组件 知道父组件传递的值不存在的时候递归结束 条件是全局注册的组件

<tree-folder>
  <p>
    <span>{{ folder.name }}</span>
    <tree-folder-contents :children="folder.children"/>
  </p>
</tree-folder>

子组件
  <ul>
    <li v-for="child in children">
      <tree-folder v-if="child.children" :folder="child"/>
      <span v-else>{{ child.name }}</span>
    </li>
</ul>

• 当组件不是全局注册的时候 我们使用递归组件需要经过处理才使用
  解决方案如下

方案一

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

方案二
推荐使用 webpack的异步组件 通过 import 引入如下
异步组件的注册是一个箭头函数

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}