本文小编为大家详细介绍“Vue如何实现递归组件”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue如何实现递归组件”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
字面理解为层层递进最后归并到一起，它的特点就是层级分明。
例如饿了么组件库的树组件就是一个递归。
1、循环出一级类别
2、判断如果有多级，再调用自身。
代码如下（示例）：
计算
安全
数据库
网络和加速
企业服务
<template>
<div>
<!-- 递归组件 -->
<Recursion :list="list" /> list为获取数据，传入子页面
</div>
</template>
<script>
import Recursion from "./recursion.vue";
export default {
name: "index-Recursion",
components: {
Recursion,
},
};
</script>代码如下（示例）：
<template>
<div>
<div class="item">
<div>
<ul>
<li v-for="(l, id) of list" :key="id">
{{ l.name }}
<ul v-if="l.chidren"> // 核心代码1
<li>
<index-chird :list="l.chidren" /> // 核心代码2
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "index-chird", // 自身组件
props: {
list: Array,
},
data() {
return {
list: [],
};
},
watch: {
list(newData) {
this.list = newData;
},
},
};
</script>
<style scoped>
.item {
margin: 0 auto;
}
</style>此处使用监听器监听数据变化，如果正常发请求传递数据不需要监听，如果报出没有拿到数据的错误可使用监听器。
除了上述的树形视图外，评论也是一个不错的应用场景，比如网易新闻的评论回复功能。或者一个包含父任务和多级子任务的todolist，总之，递归组件适合那些在UI上有父子关系的场景。
写一个递归组件
其实，有一点也是在实现递归组件要注意的，就是要防止无限递归，造成调用栈溢出。上面说的子子孙孙，无穷尽也，说说可以，可是浏览器受不了啊。这就要根据实际场景来分析递归的终止条件。接下来，我们来写一个递归组件。
上面的demo实现了一个模拟dom事件冒泡的操作，当点击中心圆时，事件逐级传递，然后改变div的颜色，直到冒泡到最顶层。这里根据设置圆的数量进行递归，递归的终止条件是直到数量减到1：
<template>
...
<colorful-circle
v-if="count > 1" // 控制递归条件
:count="count - 1" // 每向下一层，count减1
@colorChange="handleColor"
></colorful-circle>
...
</template>递归组件在事件监听上也是一个有意思的地方，你可以一层一层接力，直到将事件冒泡到最顶层。代码片段如下：
<template>
...
<colorful-circle
v-if="count > 1"
:count="count - 1"
@colorChange="handleColor" // 监听子colorful-circle组件发出的事件
></colorful-circle>
...
</template>
<script>
name: 'colorful-circle',
...
methods: {
...
handleColor(c) {
this.color = Color(c).darkenByAmount( .05 ); // 在本层组件改变颜色
setTimeout(() => {
this.$emit('colorChange', this.color); // 把事件再冒泡到上一层组件
},100)
},
}
...
</script>读到这里，这篇“Vue如何实现递归组件”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
