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 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
深入理解(function(){... })();
Aug 16 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 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跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php图片添加水印例子
2016/07/20 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
详解Python用户登录接口的方法
2019/04/17 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
早读课迟到检讨书
2014/09/25 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
幼儿园大班教师评语
2019/06/21 职场文书