Vue $attrs和$listeners的使用

A父、B子、C孙

组件传值的时候会用到A组件在B组件传递值，B组件会通过 $attrs获取到不在B组件props里面的所有属性，B组件通过在C组件上绑定 $attrs 和 $listeners 使C组件获取A组件传递的值并且可以调用在A组件那里定义的方法

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法-- $ attrs/ $listeners

$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。

$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
例子：

// A组件

B组件：不使用props获取时，可以使用 $attrs获取。当使用props获取时，不可以使用 $attrs获取

//B组件

C组件获取A值并调取A组件方法

// C组件

简单来说：$ attrs与$ listeners 是两个对象，$ attrs 里存放的是父组件中绑定的非 Props 属性，$ listeners里存放的是父组件中绑定的非原生事件