Vue独立组件开发-递归组件

一、前言

递归组件就是指组件在模板中调用自己。

二、实现

开启递归组件的必要条件，就是在组件中设置一个 name 选项。

<template>
  <div>
    <my-component></my-component>
  </div>
</template>
<script>
export default {
  name: 'my-component'
}
</script>

在 Webpack 中导入一个 Vue 组件，一般是通过 import myComponent from 'xxx' 这样的语法，然后在当前组件（页面）的 components: { myComponent } 里注册组件，这种组件是不强制设置 name 字段的，组件的名字都是使用者在 import 进来后自定义的。

但递归组件的使用者是组件自身，它得知道这个组件叫什么，因为没有用 components 注册，所以 name 字段就是必须的了。

除了递归组件用 name，有一些特殊的方法，比如通过遍历匹配组件的 name 选项来寻找组件实例，还有keep-alive组件也会使用组件的name属性。

不过，使用上面的组件是有问题的，如果直接运行，会抛出 max stack size exceeded 的错误，因为组件会无限递归下去，死循环。

要解决这个问题，就要给递归组件一个限制条件，一般会在递归组件上用 v-if 在某个地方设置为 false 来终结。比如我们给上面的示例加一个属性 count，当大于 5 时就不再递归：

<template>
  <div>
    <p>recursion</p>
    <my-component :count="count + 1" v-if="count <= 5"></my-component>
  </div>
</template>
<script>
export default {
  name: 'my-component',
  props: {
    count: {
      type: Number,
      default: 1
    }
  }
}
</script>

所以，实现一个递归组件的必要条件是：

• 要给组件设置 name；
• 要有一个明确的结束条件；

三、总结

递归组件的使用需要特别关注结束条件，否则会一直递归下去导致程序报错。

四、最后

本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。顺手来个三连击，点赞👍收藏💖关注?，一起加油?