這篇文章主要給大家介紹了關於Vue v2.4中新增的$attrs及$listeners屬性的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨着小編來一起學習學習吧。
目錄
前言
多級組件嵌套需要傳遞數據時,通常使用的方法是通過vuex。如果僅僅是傳遞數據,而不做中間處理,使用 vuex 處理,未免有點殺雞用牛刀。Vue 2.4 版本提供了另一種方法,使用 v-bind=”$attrs”, 將父組件中不被認爲 props特性綁定的屬性傳入子組件中,通常配合 interitAttrs 選項一起使用。之所以要提到這兩個屬性,是因爲兩者的出現使得組件之間跨組件的通信在不依賴 vuex 和事件總線的情況下變得簡潔,業務清晰。
首先分析以下應用場景:
A 組件與 B 組件之間的通信: (父子組件)
如上圖所示,A、B、C三個組件依次嵌套,按照 Vue 的開發習慣,父子組件通信可以通過以下方式實現:
- A to B 通過props的方式向子組件傳遞,B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現
- 通過設置全局Vuex共享狀態,通過 computed 計算屬性和 commit mutation的方式實現數據的獲取和更新,以達到父子組件通信的目的。
- Vue Event Bus,使用Vue的實例,實現事件的監聽和發佈,實現組件之間的傳遞。
往往數據在不需要全局的情況而僅僅是父子組件通信時,使用第一種方式即可滿足。
A 組件與 C 組件之間的通信: (跨多級的組件嵌套關係)
如上圖,A 組件與 C 組件之間屬於跨多級的組件嵌套關係,以往兩者之間如需實現通信,往往通過以下方式實現:
- 藉助 B 組件的中轉,從上到下props依次傳遞,從下至上,$emit事件的傳遞,達到跨級組件通信的效果
- 藉助Vuex的全局狀態共享
- Vue Event Bus,使用Vue的實例,實現事件的監聽和發佈,實現組件之間的傳遞。
很顯然,第一種通過props和$emit的方式,使得組件之間的業務邏輯臃腫不堪,B組件在其中僅僅充當的是一箇中轉站的作用。如使用第二種 Vuex的方式,某些情況下似乎又有點大材小用的意味,(僅僅是想實現組件之間的一個數據傳遞,並非數據共享的概念)。第三種情況的使用在實際的項目操作中發現,如不能實現很好的事件監聽與發佈的管理,往往容易導致數據流的混亂,在多人協作的項目中,不利於項目的維護。
$attrs以及$listeners的出現解決的就是第一種情況的問題,B 組件在其中傳遞props以及事件的過程中,不必在寫多餘的代碼,僅僅是將$attrs以及$listeners向上或者向下傳遞即可。
示例代碼
如下所示:
A組件(App.vue)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
|
B組件(Child1.vue)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
結果:
in child1:
props: v_child1
$attrs: { “p-child2”: “v_child2”}
C 組件 (Child2.vue)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
結果:
in child2:
props: v_child2
$attrs: {}
知識點總結
$attrs
包含了父作用域中不被認爲 (且不預期爲) props 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 props 時,這裏會包含所有父作用域的綁定 (class 和 style 除外),並且可以通過 v-bind=”$attrs” 傳入內部組件——在創建更高層次的組件時非常有用。
$listeners
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on=”$listeners” 傳入內部組件——在創建更高層次的組件時非常有用。
inheritAttrs
默認情況下父作用域的不被認作 props 的特性綁定 (attribute bindings) 將會“回退”且作爲普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另一個組件的組件時,這可能不會總是符合預期行爲。通過設置 inheritAttrs 到 false,這些默認行爲將會被去掉。而通過 (同樣是 2.4 新增的) 實例屬性 $attrs 可以讓這些特性生效,且可以通過 v-bind 顯性的綁定到非根元素上。
上述特性的使用完全可以降低在不使用Vuex以及事件總線的情況下,組件跨級props以及事件傳遞的複雜度。