在Vue中詳細介紹$attrs屬性

這篇文章主要為大家介紹了關於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）

<template>
 <p id="app">
 <child1
 :p-child1="child1"
 :p-child2="child2"
 v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发
 v-on:test2="onTest2"> 
 </child1>
 </p>
</template>
<script>
 import Child1 from &#39;./Child1.vue&#39;;
 export default {
 data () {
 return {};
 },
 components: { Child1 },
 methods: {
 onTest1 () {
 console.log(&#39;test1 running...&#39;);
 },
 onTest2 () {
 console.log(&#39;test2 running&#39;);
 }
 }
 };
</script>

B元件（Child1.vue）

<template>
 <p class="child-1">
 <p>in child1:</p>
 <p>props: {{pChild1}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 <!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
 <child2 v-bind="$attrs" v-on="$listeners"></child2>
 </p>
</template>
<script>
 import Child2 from &#39;./Child2.vue&#39;;
 export default {
 props: [&#39;pChild1&#39;],
 data () {
 return {};
 },
 inheritAttrs: false,
 components: { Child2 },
 mounted () {
 this.$emit(&#39;test1&#39;);
 }
 };
</script>

結果：

in child1:

props: v_child1

$attrs: { “p-child2”: “v_child2”}

#C 元件(Child2.vue)

<template>
 <p class="child-2">
 <p>in child2:</p>
 <p>props: {{pChild2}}</p>
 <p>$attrs: {{$attrs}}</p>
 <hr>
 </p>
</template>
<script>
 export default {
 props: [&#39;pChild2&#39;],
 data () {
 return {};
 },
 inheritAttrs: false,
 mounted () {
 this.$emit(&#39;test2&#39;);
 }
 };
</script>

結果：

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以及事件傳遞的複雜度。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

利用jquery如何實現點擊a連結修改背景樣式

有關ajax同步操作出現瀏覽器假死（詳細教學）

在js中如何實作監控文字方塊輸入字數（詳細教學）

在JavaScript中有哪些高效能演算法

react-router4配合webpack require.ensure 實作非同步載入（詳細教學）

#

以上是在Vue中詳細介紹$attrs屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！