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-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

谈谈Vue的递归组件的更多相关文章

  1. 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能

    大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...

  2. Vue.js 递归组件实现树形菜单

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = tr ...

  3. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  4. vue的递归组件以及三级菜单的制作

    js里面有递归算法,同时,我们也可以利用props来实现vue模板的递归调用,但是前提是组件拥有 name 属性 父组件:slotDemo.vue: <template> <div& ...

  5. 用Vue.js递归组件构建一个可折叠的树形菜单

    在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', {   template: `<!--Invoking myself! ...

  6. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  7. vue中递归组件的使用

    2019独角兽企业重金招聘Python工程师标准>>> 递归 简单来讲就是程序自己调用自身. vue中的递归组件就是,组件自身调用自身. 父组件 <template> & ...

  8. vue之递归组件实现树形目录

    递归组件的应用===>可以通过组件命名来自己使用自己的组件 实例如下 父组件 <div class="content"> <detail-list :lis ...

  9. Vue一个案例引发的递归组件的使用

    今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...

随机推荐

  1. 元组(tuple)的用途(基础)

    >>>a = 123,456,'jia',['jia','xiang'] >>>a (123, 456, 'jia', ['jia', 'xiang']) 这个带括 ...

  2. k-means|k-mode|k-prototype|PAM|AGNES|DIANA|Hierarchical cluster|DA|VIF|

    聚类算法: 对于数值变量,k-means eg:k=4,则选出不在原数据中的4个点,计算图形中每个点到这四个点之间的距离,距离最近的便是属于那一类.标准化之后便没有单位差异了,就可以相互比较. 对于分 ...

  3. ios alamofire4.x网络框架url 中文问题

    一种方式是把参数放到Parameters里面 request 增加 encoding:URLEncoding.default 就可以 还有中文在path上 比如    http://www.chao. ...

  4. bat脚本修改dns(判断系统版本)

    @echo off systeminfo if "%OS 名称%"=="%7%" goto windows7:windows7echo 正在设置本机主DNS , ...

  5. Docker相关学习地址

    菜鸟教程:http://www.runoob.com/docker/docker-image-usage.html 官方文档:https://docs.docker.com/

  6. 分享几个4412开发板新录制的视频,不是VIP也能看

    如果能点个赞就更好啦 iTOP4412开发板介绍https://www.bilibili.com/video/av74453392 iTOP4412开发板系统编程前言https://www.bilib ...

  7. 浅谈PHP小马免杀

    在渗透测试过程初期,上传小马,拿到 webshell 再进行下一步的操作,现如今的网站安全更多是 一些云防护.CDN防护.服务器安全软件等等,给渗透测试.提权等带来了一定难度的提升, 今天探讨一下如何 ...

  8. Leetcode14._最长公共前缀

    题目 编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow&q ...

  9. 吴裕雄--天生自然 HADOOP大数据分布式处理:使用WinSCP连接本机与虚拟机

  10. PXE自动部署工具

    1.工具介绍1.1::本工具主要以图形界面的方式帮助使用者快速部署PXE安装Linux的基础环境环境,(如不需要可忽略相关操作)并且支持自动配置静态IP地址和为H3C设备划分VLAN. 1.2::对于 ...