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

一、前言

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

二、实现

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

在 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 时就不再递归：

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

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

三、总结

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

四、最后

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