vue中的$attrs和$listeners

在组件多级嵌套的情况下，相互间的传值是这样的呢 ？

A组件（父组件）➡️B组件（子组件）➡️C组件（孙组件）

在很多开发情况下，我们只是想把A组件的信息传递给C组件，如果使用props 绑定来进行信息的传递，虽然能够实现，但是代码并不美观。

在vue2.4中，为了解决该需求，引入了$attrs和$listeners， 新增了inheritAttrs 选项。

1.$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

// 父组件A 代码如下

// 子组件B 代码如下

// 孙组件C 代码如下

2.$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

// 父组件 A

// 子组件B

//孙组件C

参考来源：https://www.jianshu.com/p/f7fa47499b39