关于vue中$attrs与$listeners

$attrs与$listeners的主要应用是实现多层嵌套传递。

$attrs是本组件不包含class， style、已声明的props和事件属性的集合。可使用v-bind传入下级组件。

$listeners是本组件的方法。可使用v-on传入下级组件。

1、$attrs详述

可以通过 v-bind="$attrs" 传入内部组件，在创建高级组件中非常有用。

个人理解：一个组件在父组件中被引用，$attrs就是组件标签上的静态属性值（attr）和动态属性值（：attr）的对象集合，这个集合不包含class， style、已声明的props和事件属性。

示例：爷组件定义父组件props，而父组件没有在props中接收，如果父组件在子组件上中定义了v-bind="$attrs"，则子组件会接收这些未使用的props。同样，此时在父组件中调用方法修改爷组件的值，而爷组件的该值父组件没有使用props接收，实际相当于父组件在更改子组件的值。

2、$listeners详述

可以通过 v-on="$listeners" 传入内部组件，在创建高级组件中非常有用。

个人理解：与$attrs大致相同，但是是针对于事件的。包含了父作用域中的事件监听器(不含 .native 修饰器的)，通俗的讲也就是在使用组件的时候在标签中定义的事件，如@input、@click、v-on，以及一些自定义事件@tempFn等。

示例：暂无

另外注意，在vue3.0中$listeners与inheritAttrs已经弃用了，事件监听器成为了 $attrs 的一部分。