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 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
jQuery中的Deferred和promise 的区别
Apr 03 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
js实现简易计算器功能
Oct 18 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
vue中v-model对select的绑定操作
Aug 31 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
详解jQuery选择器
2016/12/21 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python字符串与url编码的转换实例
2018/05/10 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python各层级目录下import方法代码实例
2020/01/20 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
秋季运动会广播稿
2014/02/22 职场文书
精神文明建设标语
2014/06/16 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书