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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
input 高级限制级用法
Mar 26 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
基于jQuery实现的美观星级评论打分组件代码
Oct 30 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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.MVC的模板标签系统(二)
2006/09/05 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php实现的验证码文件类实例
2015/06/18 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jquery中each方法示例和常用选择器
2014/07/08 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
2021/01/07 Javascript
Vue多选列表组件深入详解
2021/03/02 Vue.js
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
基于python 取余问题(%)详解
2020/06/03 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
小学新教师培训方案
2014/02/03 职场文书
2014年计生标语
2014/06/23 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫