vue父子元件之間的傳值我們都知道使用props和emit，但是祖孫之間的傳值在以前，我們都需要子輩作為中間人，當祖輩有值要傳遞給孫輩時，需要子輩作為中間人把值傳遞給孫輩，當孫輩想要改變祖輩的值時，需要先emit子輩的方法，然後子輩再emit父輩的方法從而改變祖輩的值，如果是多級元件巢狀的話，那麼祖孫輩之間傳值，就會變得非常的繁瑣，為了解決這個需求，vue2.4版本產生了$attrs，$listeners，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>`,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 的介紹結束

到此這篇關於淺談Vue2.4.0 $attrs與inheritAttrs的具體使用的文章就介紹到這了,更多相關Vue2.4.0 $attrs與inheritAttrs內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！