Vue中$attrs和$listeners的使用、provide和inject的使用和传递响应式数据

$attrs和 $listeners 的使用

概念

官方解释：

$attrs：

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

$listeners：

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

通俗解释：

$attrs：父组件可以无限级向子组件传递不作为 prop 被识别的属性。当父组件想给孙子组件，孙孙孙子组件传值时不用一层一层的去定义props。 $listeners：可以从孙孙子组件直接传递方法给父组件。

使用

直接上代码：

父组件
儿子组件

孙子组件

浏览器页面截图

inheritAttrs：

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

provide和 inject的使用

概念

provide / inject：

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide 选项应该是一个对象或返回一个对象的函数。
inject 选项应该是：一个字符串数组，或一个对象，对象的 key 是本地的绑定名。

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

使用

就着$attrs代码的基础上增加相应代码，注意红色框 框着的代码。

父组件
provide本身时是非响应式的，如果我们返回一个函数的话，可以让其变成相应式的，所以return的getName是一个函数。

儿子组件
这里没有儿子组件什么事情，所以省略…
孙子组件

浏览器页面截图
当我们还没有点击 change name 按钮的时候，可以看到孙子组件inject获取的name值是：原始值。

现在我们点击一个change name 按钮，孙子组件inject获取的name值变成了：父组件change name。