Vue组件通信$attrs、$listeners实现原理解析
前言
vue通信手段有很多种，props/emit、vuex、eventbus、provide/inject等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说明使用方式。
$attrs
官方解释：
包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。
我的理解：
接收除了props声明外的所有绑定属性（class、style除外）
图解：
由于child.vue在props中声明了name属性，$attrs中只有age、gender两个属性，输出结果为：
{age:"20",gender:"man"}
另外可以在grandson.vue上通过v-bind="$attrs"，可以将属性继续向下传递，让grandson.vue也能访问到父组件的属性，这在传递多个属性时会显得很便捷，而不用一条条的进行绑定。
如果想要添加其他属性，可继续绑定属性。但要注意的是，继续绑定的属性和$attrs中的属性有重复时，继续绑定的属性优先级会更高。
$listeners
官方解释：
包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。
我的理解：
接收除了带有.native事件修饰符的所有事件监听器
图解：
parent.vue中对child.vue绑定了两个事件，带有.native的click事件和一个自定义事件，所以在child.vue中，输出$listeners的结果为：
{customEvent:fn}
同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是个完美的解决方案。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。