怎么在Vue2.4.0項目中使用$attrs與inheritAttrs

怎么在Vue2.4.0項目中使用$attrs與inheritAttrs？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

vm.$attrs

包含了父作用域中不作為 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"  />
 </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"  />
 </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" >我是子組件</p>
</div>

可以看到沒有在子組件 props 中聲明的 age 屬性被寫到了標簽里，如果你不希望這樣，則可以把子組件中的 inheritAttrs 設為 false，解析后的結果如下

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

看完上述內容，你們掌握怎么在Vue2.4.0項目中使用$attrs與inheritAttrs的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！