【Vue】vue中的$attrs到底是什么？

先来看看官方文档给的定义：

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

既然来到这里就继续往下看！

既然是跟组件间数据传值有关，话不多说，直接上栗子：

<div id="app">
    Parent:  {{msg}}
    <son-component v-bind:msg="msg"></son-component>
</div>

let vm = new Vue({
    el: '#app',
    data: {
      msg: 'baseDom'
    },
    //使用props接收
    components:{
      'son-component': {
        props: [
          'msg'
        ],
        template:`<div>Son:  <grandson-component v-bind:msg="msg"></grandson-component></div>`,
        components:{
          'grandson-component': {
            props: [
              'msg'
            ],
            template: `<div>Grandson:  {{msg}}</div>`
          }
        }
      }
    }
})

1. 根组件内调用son-component，并且绑定根组件data中的变量msg；
2. 此时son-component中通过定义props可以接收到根组件的msg；
3. 然后son-component中定义grandson-component组件，并且绑定msg；
4. 此时grandson-component通过定义props可以接收到son-component组件的msg；
5. 仔细查阅组件代码，发现msg在son-component组件中仅仅起到传递作用；
6. 有没有其它办法解决传值冗余呢？别问，问就有；

let vm = new Vue({
    el: '#app',
    data: {
      msg: 'baseDom'
    },
    //使用$attrs接收
    components:{
      'son-component': {
        // props: [
        //   'msg'
        // ],
        template:`<div>Son:  <grandson-component v-bind="$attrs"></grandson-component></div>`,
        components:{
          'grandson-component': {
            props: [
              'msg'
            ],
            template: `<div>Grandson:  {{msg}}</div>`
          }
        }
      }
    }
})

1. 首先，在son-component中不再接收根组件的msg；
2. son-component组件调用grandson-component组件，绑定主角$attrs；
3. 即可实现接收根组件msg；

总结：多级组件传值时，调用目标组件绑定$attrs，可直接获取根组件所传递参数，而不用每一级组件逐层传递。