Vue2.4 $attrs、$listeners、inheritAttrs的使用

在开始介绍之前先看下vue官方文档对 $attrs和 $listeners的解释：

vm.$attrs
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
vm.$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

讲真，我看了几遍也是没看懂，既然如此那就举个栗子来说明吧，先看如下图组件多级嵌套的情况：

图1

如图所示，A B C组件的嵌套关系如图所示，如果从数据从A组件到B组件则用props属性即可，将更新的数据传回A组件则采用$emit触发A组件自定义函数即可，那么直接从A组件到C组件如何传递数据呢？
方案1：采用Vuex进行统一的状态管理。如果项目不是很大，组件间的全局共享状态不多，则使用vuex反而复杂
方案2：将A组件的数据传到B组件在从B组件传到C组件。会造成代码繁琐维护困难等。
在vue2.4中，为了解决该需求，引入了$attrs 和$listeners ， 新增了inheritAttrs 选项。

如上述代码，App代表A组件，Child代表B组件，GeandSon代表C组件，数据从A组件到B组件依然通过父组件自定义属性，子组件注册props接受属性值的形式。
不同的是在Child组件中绑定了$attrs和$listeners,而在Child组件props中注册了父组件传递过来的foo属性，在GrandSon组件的props中注册了coo、ceo属性，那么$attrs则起到将coo ceo属性从父组件传到孙组件的作用，同样如果要在孙组件改变数据后回传到父组件，只需要在Child组件中绑定$listeners即可，依然是通过父组件自定义事件，孙组件通过$emit触发函数。

接下来介绍inheritAttrs：

inheritAttrs：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

执行上面代码查看子组件的DOM元素，如下图：

image.png

简单来说就是，当子组件的props中未注册父组件传递过来的属性时：
当设置inheritAttrs: true(默认)时，子组件顶层标签会渲染出父组件传递过来的属性，
当设置inheritAttrs: true时，子组件顶层标签不会渲染父组件传递过来的属性；
无论inheritAttrs为true或者false，子组件中都能通过$attrs属性获取到父组件中传递过来的属性,参考上面的console.log(this. $attrs)打印出来的值即可。