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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
提升页面加载速度的插件InstantClick
Sep 12 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
前端路由&webpack基础配置详解
Jun 10 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 05 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
Snoopy类使用小例子
2008/04/15 PHP
php单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP开发不能违背的安全规则 过滤用户输入
2011/05/01 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
protractor的安装与基本使用教程
2017/07/07 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
python正则表达式re模块详细介绍
2014/05/29 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python中处理字符串之islower()方法的使用简介
2015/05/19 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
公交公司毕业生求职信
2014/02/15 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript