浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用

vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$attrs，$listeners，inheritAttrs这三个属性。

vm.$attrs

官方API

vm.$attrs

2.4.0 新增，类型：{ [key: string]: string }，只读

详细：

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

使用介绍

从官方介绍我们可以得出 $attrs 应用于父子传值场景下，子组件通过 $attrs 可以访问父组件传过来的所有属性，但需要注意的是如果父组件所传的属性中有在子组件 props 中有过声明，那么该属性不会出现在 $attrs 对象中。

上示例

<template>
 <div>
  <p>我是父组件</p>
  <test name="tom" :age="12" :id="12345" class="child" style="color: red" />
 </div>
</template>
<script>
export default {
 components: {
  test: {
   template: `
   <div>
    <p>我是子组件</p>
    <test2 v-bind="$attrs" s1="sss" s2="sss" />
   </div>`,
   props: ["name"],
   created() {
    console.log(this.$attrs); // {age: 12, id: 12345}
   },
   components: {
    test2: {
     template: `<p>我是孙子组件</p>`,
     props: ["age", "s1"],
     created() {
      console.log(this.$attrs); // {s2: "sss", id: 12345}
     }
    }
   }
  }
 }
};
</script>

首先可以看到父组件传给子组件传了 name、age、id、class、style 五个属性，其中 name 属性在子组件 props 中声明，又因为 class 和 style 属性会被 $attrs 除外，最终在子组件打印的 $attrs 输出了 {age: 12, id: 12345}

接着，子组件把自己的 $attrs 对象传给了孙子组件，同时又给孙子组件传了 s1、s2 两个属性，孙子组件在自己的属性 props 中声明了 age 、s1 两个属性，最终打印输出 {s2: “sss”, id: 12345} 可以看到，孙子组件的 $attrs 合并了从父组件和子组件传来的属性，并把 props 中声明的属性除外

至此 $attrs 的介绍结束，下面开始介绍 inheritAttrs

inheritAttrs