淺談 Vue2.4.0 $attrs 與 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

官方API

inheritAttrs

2.4.0 新增，類型：boolean，默認值：true

詳細：

默認狀況下父做用域的不被認做 props 的特性綁定 (attribute bindings) 將會「回退」且做爲普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另外一個組件的組件時，這可能不會老是符合預期行爲。經過設置 inheritAttrs 到 false，這些默認行爲將會被去掉。而經過 (一樣是 2.4 新增的) 實例屬性 $attrs 可讓這些特性生效，且能夠經過 v-bind 顯性的綁定到非根元素上。

注意：這個選項不影響 class 和 style 綁定。

使用介紹

官方的解釋看上去很唬人，其實默認狀況就是把 $attrs 對象上沒在子組件 props 中聲明的屬性加在子組件的根 html 標籤上

上示例

<template>
  <div>
    <p>我是父組件</p>
    <test name="tom" age="12" class="child" style="color: red" />
  </div>
</template>

<script>
export default {
  components: {
    test: {
      template: `<p>我是子組件</p>`,
      props: ["name"],
      inheritAttrs: true,  // 默認爲 true
      created() {
        console.log(this.$attrs); // {age: "12"}
      }
    }
  }
};
</script>

能夠看到父組件傳給子組件傳了 name、age 兩個屬性，其中 name 屬性在子組件 props 中聲明，以上代碼瀏覽器解析後

<div>
  <p data-v-469af010>我是父組件</p>
  <p data-v-469af010 age="12" class="child" style="color: red;">我是子組件</p>
</div>

能夠看到沒有在子組件 props 中聲明的 age 屬性被寫到了標籤裏，若是你不但願這樣，則能夠把子組件中的 inheritAttrs 設爲 false，解析後的結果以下

<div>
  <p data-v-469af010>我是父組件</p>
  <p data-v-469af010 class="child" style="color: red;">我是子組件</p>
</div>

能夠看到標籤中的屬性消失了，同時能夠看到 class、style 屬性不受影響

至此 inheritAttrs 的介紹結束