vue中的$attrs是什么？

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

在vue中通过props来传递参数的时候，可能会遇到需要父直接传到孙的情况，此值在子组件中并没有什么作用，只是在孙子组件中有用到，这个时候就可以通过$attrs来传递参数，例如

let vm = new Vue({
    el: '#app',
    data: {
      msg: '父组件的内容'
    },
    //使用$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.首先，在子组件中不用再通过props来接收来自父组件的信息；
2.在子组件中调用孙子组件，绑定$attrs;
3.这样在孙子组件就能直接接收父组件的内容

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