谈谈Vue的递归组件

2019/04/10 10:10
阅读数 13

2月最后一天,而且还四年一遇,然而本月居然一篇博客没写,有点说不过去。所以,今天就来谈谈Vue的递归组件。我们先来看一个例子:

<iframe height="422" style="width: 100%;" scrolling="no" title="递归组件" src="https://codepen.io/imgss/embed/preview/QWbveLg?height=422&theme-id=27057&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/imgss/pen/QWbveLg'>递归组件</a> by imgss (<a href='https://codepen.io/imgss'>@imgss</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

什么是递归组件

上面这个例子,就是用递归组件实现的。递归组件,顾名思义,就是自己的内部实现又调用自己的组件。比如Vue官方给的treeView的例子,父目录下有子目录,子目录下还有子目录,子子孙孙,无穷尽也。就像俄罗斯套娃。

代码结构大概长下面这样子,需要注意递归组件与一般组件不同的地方是,你需要给组件提供一个name选项,防止Vue编译的时候,将内部调用的Example组件认为是未定义组件,当然,你也可以直接将组件注册未一个全局组件。

// example组件的实现
<template>
<div>
  ...
   <Example></Example>
  ...
</div>
</template>

<script>

export default {
	name: 'Example' // 重要
}
</script>

递归组件的应用场景

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

uploading-image-265541.png

写一个递归组件

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

上面的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>

全部代码可到上面的codepen中查看,大家周末愉快。2020.02.29😊(本文完)

原文出处:https://www.cnblogs.com/imgss/p/12382356.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部