谈谈Vue的递归组件
谈谈Vue的递归组件
2月最后一天，而且还四年一遇，然而本月居然一篇博客没写，有点说不过去。所以，今天就来谈谈Vue的递归组件。我们先来看一个例子：
See the Pen 递归组件 by imgss
(@imgss) on CodePen.
什么是递归组件
上面这个例子，就是用递归组件实现的。递归组件，顾名思义，就是自己的内部实现又调用自己的组件。比如Vue官方给的treeView的例子，父目录下有子目录，子目录下还有子目录，子子孙孙，无穷尽也。就像俄罗斯套娃。
代码结构大概长下面这样子，需要注意递归组件与一般组件不同的地方是，你需要给组件提供一个name选项，防止Vue编译的时候，将内部调用的Example组件认为是未定义组件，当然，你也可以直接将组件注册未一个全局组件。
// example组件的实现<template><div>...<Example></Example>...</div></template><script>export default {name: 'Example' // 重要}</script>
递归组件的应用场景
除了上述的树形视图外，评论也是一个不错的应用场景，比如网易新闻的评论回复功能。或者一个包含父任务和多级子任务的todolist，总之，递归组件适合那些在UI上有父子关系的场景。
写一个递归组件
其实，除了前面所说的name选项是必须的之外，还有一点也是在实现递归组件要注意的，就是要防止无限递归，造成调用栈溢出。上面说的子子孙孙，无穷尽也，说说可以，可是浏览器受不了啊。这就要根据实际场景来分析递归的终止条件。接下来，我们来写一个递归组件。
上面的demo实现了一个模拟dom事件冒泡的操作，当点击中心圆时，事件逐级传递，然后改变div的颜色，直到冒泡到最顶层。这里根据设置圆的数量进行递归，递归的终止条件是直到数量减到1：
<template>...<colorful-circlev-if="count > 1" // 控制递归条件:count="count - 1" // 每向下一层，count减1@colorChange="handleColor"></colorful-circle>...</template>
递归组件在事件监听上也是一个有意思的地方，你可以一层一层接力，直到将事件冒泡到最顶层。代码片段如下：
<template>...<colorful-circlev-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>
全部代码可到上面的codepen中查看，大家周末愉快。2020.02.29
版权声明：本文为imgss原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。