vue父子組件之間的傳值我們都知道使用props和emit，但是祖孫之間的傳值在以前，我們都需要子輩作為中間人，當(dāng)祖輩有值要傳遞給孫輩時，需要子輩作為中間人把值傳遞給孫輩，當(dāng)孫輩想要改變祖輩的值時，需要先emit子輩的方法，然后子輩再emit父輩的方法從而改變祖輩的值，如果是多級組件嵌套的話，那么祖孫輩之間傳值，就會變得非常的繁瑣，為了解決這個需求，vue2.4版本產(chǎn)生了$attrs，$listeners，inheritAttrs這三個屬性。

vm.$attrs

官方API

vm.$attrs

2.4.0 新增，類型：{ [key: string]: string }，只讀

詳細(xì)：

包含了父作用域中不作為 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。

使用介紹

從官方介紹我們可以得出 $attrs 應(yīng)用于父子傳值場景下，子組件通過 $attrs 可以訪問父組件傳過來的所有屬性，但需要注意的是如果父組件所傳的屬性中有在子組件 props 中有過聲明，那么該屬性不會出現(xiàn)在 $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 的介紹結(jié)束，下面開始介紹 inheritAttrs

inheritAttrs

官方API

inheritAttrs

2.4.0 新增，類型：boolean，默認(rèn)值：true

詳細(xì)：

默認(rèn)情況下父作用域的不被認(rèn)作 props 的特性綁定 (attribute bindings) 將會“回退”且作為普通的 HTML 特性應(yīng)用在子組件的根元素上。當(dāng)撰寫包裹一個目標(biāo)元素或另一個組件的組件時，這可能不會總是符合預(yù)期行為。通過設(shè)置 inheritAttrs 到 false，這些默認(rèn)行為將會被去掉。而通過 (同樣是 2.4 新增的) 實例屬性 $attrs 可以讓這些特性生效，且可以通過 v-bind 顯性的綁定到非根元素上。

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

使用介紹

官方的解釋看上去很唬人，其實默認(rèn)情況就是把 $attrs 對象上沒在子組件 props 中聲明的屬性加在子組件的根 html 標(biāo)簽上

上示例

<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, // 默認(rèn)為 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>

可以看到?jīng)]有在子組件 props 中聲明的 age 屬性被寫到了標(biāo)簽里，如果你不希望這樣，則可以把子組件中的 inheritAttrs 設(shè)為 false，解析后的結(jié)果如下

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

可以看到標(biāo)簽中的屬性消失了，同時可以看到 class、style 屬性不受影響

至此 inheritAttrs 的介紹結(jié)束

到此這篇關(guān)于淺談Vue2.4.0 $attrs與inheritAttrs的具體使用的文章就介紹到這了,更多相關(guān)Vue2.4.0 $attrs與inheritAttrs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論