Vue组件通信$attrs、$listeners实现原理解析


Posted in Javascript onSeptember 03, 2020

前言

vue通信手段有很多种,props/emit、vuex、event bus、provide/inject 等。还有一种通信方式,那就是$attrs和$listeners,之前早就听说这两个api,趁着有空来补补。这种方式挺优雅,使用起来也不赖。下面例子都会通过父、子、孙子,三者的关系来说明使用方式。

Vue组件通信$attrs、$listeners实现原理解析

$attrs

官方解释:

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

我的理解:

接收除了props声明外的所有绑定属性(class、style除外)

图解:

Vue组件通信$attrs、$listeners实现原理解析

由于child.vue 在 props 中声明了 name 属性,$attrs 中只有age、gender两个属性,输出结果为:

{age: "20",gender: "man"}

Vue组件通信$attrs、$listeners实现原理解析

另外可以在 grandson.vue 上通过 v-bind="$attrs", 可以将属性继续向下传递,让 grandson.vue 也能访问到父组件的属性,这在传递多个属性时会显得很便捷,而不用一条条的进行绑定。

如果想要添加其他属性,可继续绑定属性。但要注意的是,继续绑定的属性和 $attrs 中的属性有重复时,继续绑定的属性优先级会更高。

$listeners

官方解释:

包含了父作用域中的 (不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。

我的理解:

接收除了带有.native事件修饰符的所有事件监听器

图解:

Vue组件通信$attrs、$listeners实现原理解析

parent.vue中对 child.vue 绑定了两个事件,带有.native的 click 事件和一个自定义事件,所以在 child.vue 中,输出$listeners的结果为:

{ customEvent: fn }

Vue组件通信$attrs、$listeners实现原理解析

同 attrs 属性一样,可以通过 v-on="$listeners",将事件监听器继续向下传递,让 grandson.vue 访问到事件,且可以使用 $emit 触发 parent.vue 的函数。

如果想要添加其他事件监听器,可继续绑定事件。但要注意的是,继续绑定的事件和 $listeners 中的事件有重复时,不会被覆盖。当 grandson.vue 触发 customEvent 时,child.vue 和 parent.vue 的事件都会被触发,触发顺序类似于冒泡,先到 child.vue 再到 parent.vue。

使用场景:

组件传值时使用: 爷爷在父亲组件传递值,父亲组件会通过$attrs获取到不在父亲props里面的所有属性,父亲组件通过在孙子组件上绑定$attrs 和 $listeners 使孙组件获取爷爷传递的值并且可以调用在爷爷那里定义的方法;

对一些UI库进行二次封装时使用:比如element-ui,里面的组件不能满足自己的使用场景的时候,会二次封装,但是又想保留他自己的属性和方法,那么这个时候时候$attrs和$listners是个完美的解决方案。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中交替点击事件toggle方法的使用示例
Dec 08 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
javascript基础知识讲解
Jan 11 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 #Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 #Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 #Javascript
You might like
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
js canvas实现画图、滤镜效果
2018/11/27 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python实现读取json文件到excel表
2017/11/18 Python
python 图像平移和旋转的实例
2019/01/10 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
20行python代码实现人脸识别
2019/05/05 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
我的五年职业生涯规划
2014/01/23 职场文书
九年级英语教学反思
2014/01/31 职场文书
租房协议书范本
2014/04/09 职场文书
一分钟演讲稿
2014/04/30 职场文书
大连星海广场导游词
2015/02/10 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
学校教学工作总结2015
2015/05/19 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
Linux安装Docker详细教程
2022/07/07 Servers