【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，可直接獲取根組件所傳遞參數，而不用每一級組件逐層傳遞。