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

創(chuàng)新互聯(lián)建站十載專注成都高端網(wǎng)站建設按需策劃服務,為客戶提供專業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁設計,成都網(wǎng)站設計服務;創(chuàng)新互聯(lián)建站服務內(nèi)容包含成都網(wǎng)站建設,小程序開發(fā),軟件開發(fā),網(wǎng)絡營銷推廣,網(wǎng)絡運營服務及企業(yè)形象設計;創(chuàng)新互聯(lián)建站擁有眾多專業(yè)的高端網(wǎng)站制作開發(fā)團隊,資深的高端網(wǎng)頁設計團隊及經(jīng)驗豐富的架構師高端網(wǎng)站策劃團隊;我們始終堅持從客戶的角度出發(fā),為客戶量身訂造網(wǎng)絡營銷方案，解決網(wǎng)絡營銷疑問。

vm.$attrs

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

使用介紹

從官方介紹我們可以得出 $attrs 應用于父子傳值場景下，子組件通過 $attrs 可以訪問父組件傳過來的所有屬性，但需要注意的是如果父組件所傳的屬性中有在子組件 props 中有過聲明，那么該屬性不會出現(xiàn)在 $attrs 對象中。

上示例

首先可以看到父組件傳給子組件傳了 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 標簽上

上示例

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

 我是父組件

 我是子組件

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

 我是父組件

 我是子組件

看完上述內(nèi)容，你們掌握怎么在Vue2.4.0項目中使用$attrs與inheritAttrs的方法了嗎？如果還想學到更多技能或想了解更多相關內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章名稱：怎么在Vue2.4.0項目中使用$attrs與inheritAttrs-創(chuàng)新互聯(lián)
當前路徑：http://weahome.cn/article/dghoid.html