Vue实现递归组件代码示例

本篇文章小编给大家分享一下Vue实现递归组件代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

一、递归组件是什么？

字面理解为层层递进最后归并到一起，它的特点就是层级分明。

例如饿了么组件库的树组件就是一个递归。

二、Vue实现递归的核心思路

1、循环出一级类别

2、判断如果有多级，再调用自身。

三、代码示例

1.父级

代码如下（示例）：

2.子级

代码如下（示例）：

此处使用监听器监听数据变化，如果正常发请求传递数据不需要监听，如果报出没有拿到数据的错误可使用监听器。

3、实现效果

补充：递归组件的应用场景

除了上述的树形视图外，评论也是一个不错的应用场景，比如网易新闻的评论回复功能。或者一个包含父任务和多级子任务的todolist，总之，递归组件适合那些在UI上有父子关系的场景。

写一个递归组件

其实，有一点也是在实现递归组件要注意的，就是要防止无限递归，造成调用栈溢出。上面说的子子孙孙，无穷尽也，说说可以，可是浏览器受不了啊。这就要根据实际场景来分析递归的终止条件。接下来，我们来写一个递归组件。

上面的demo实现了一个模拟dom事件冒泡的操作，当点击中心圆时，事件逐级传递，然后改变div的颜色，直到冒泡到最顶层。这里根据设置圆的数量进行递归，递归的终止条件是直到数量减到1：

递归组件在事件监听上也是一个有意思的地方，你可以一层一层接力，直到将事件冒泡到最顶层。代码片段如下：