Vue——$atters、$listeners作用

$atters

官方解释：

包含了负作用域中不作为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 也能访问到父组件的属性，这在传递多个属性时会显得很便捷，而不用一条条的进行绑定。

$listeners

官方解释：

包含了父作用域中的v-on 事件监听器(不含.native修饰器的)。

它可以通过 v-bind="$listeners"  传入内部组件 ——在创建更高层的组件时非常有用。

解析：

接收除了带有 .native 事件修饰符的所有事件监听器。

图解：

  同 attrs 属性一样，可以通过 v-on="$listeners"，将事件监听器继续向下传递，让 grandson.vue 访问到事件，且可以使用 $emit 触发 parent.vue 的函数。

**但要注意的是，继续绑定的事件和 $listeners 中的事件有重复时，不会被覆盖。

**当 grandson.vue 触发 customEvent 时，child.vue 和 parent.vue 的事件都会被触发，触发顺序类似于冒泡，先到 child.vue 再到 parent.vue