學會使用 attrs跟 listeners

$ attrs與$ listeners的主要應用是實現多層巢狀傳遞。

元件a與元件b通訊一般都會使用元件b中轉，即a傳遞給b，b再給c，但是如果a到c元件之間巢狀的元件過多，需要傳遞的事件和屬性較多，會導致**繁瑣，**維護困難。在vue2.4中，為了解決該需求，引入了att

rs和attrs和

attrs和

listeners，新增了inheritattrs選項。

官方定義：

包含了父作用域中不作為prop 被識別 (且獲取) 的特性繫結 (class和 style除外)。當乙個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class和 style除外)，並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高階別的元件時非常有用。

（好抽象一臉懵逼。。。）

a tt

rs只代

表的是那

些沒有被

宣告為p

rops

的屬性，

如果某個

prop

被子元件

中宣告了

（就是這

個屬性已

經在子組

件的pr

ops中

了），在

子元件中

的attrs只代表的是那些沒有被宣告為props的屬性，如果某個prop被子元件中宣告了（就是這個屬性已經在子元件的props中了），在子元件中的

attrs只

代表的是

那些沒有

被宣告為

prop

s的屬性

，如果某

個pro

p被子組

件中宣告

了（就是

這個屬性

已經在子

元件的p

rops

中了），

在子元件

中的attr會把宣告的prop剔除。

個人理解：乙個元件在父元件中被引用，$attrs就是元件標籤上的靜態屬性值（attr）和動態屬性值（：attr）的物件集合，這個集合不包含class， style和事件屬性

// 父元件
="com" name=
"attr"
:foo=
"foo"
:boo=
"boo"
:coo=
"coo"
:doo=
"doo" @click=
"test"
>
<
/child-com>
...data()
},...// child-com.vue
export
default
,created()
}}

如果子元件宣告了pro

p，prop，

prop

，attrs中與$props相同的屬性會被移除

// child-com.vue
export
default
,created()
}}

如果childcom裡的子元件還用到foo，可以繼續將foo傳給子元件

//如果child的子元件c還有乙個是其父元件（child元件）的prop屬性，
//不是在c元件繫結的，那麼c元件的$attrs元件就有這個元件，即
foo:
}<
/p>
"foo" v-bind=
"$attrs"
>
<
/child-com2>
<
/div>
<
/template>
const
childcom2=(
)=>
import
('./childcom2.vue'
)export
default
,created()
}}<
/script>
created()
}inheritattrs要設定成false還是true（預設）
如果inheritattrs設定成false那麼在html裡的標籤那些屬性就不會顯示
如果inheritattrs設定成true那麼在html裡的標籤那些屬性就會顯示（每一層都有）
props必須在元件中註冊了props才能用拿到值，所以在巢狀層級比較深的元件中$attrs拿值更加便捷
包含了父作用域中的 (不含 .native 修飾器的) v-on 事件***。它可以通過v-on=」$listeners」傳入內部元件。
歸納起來也是兩點：
$ listeners是元件的內建屬性，它的值是父元件(不含.native修飾器的) v-on事件***。
元件可以通 過在自己的子元件上使用v-on=」$ listeners」，進一步把值傳給自己的子元件。如果子元件已經繫結$ listener中同名的***，則兩個***函式會以冒泡的方式先後執行。
父元件：

="test"

"" v-on=

"">

/child>

/div>

/template>

import child from

'./child'

export

default},

components:

, methods:

,changeage

(age)}}

/script>子元件child.vue

="child"

child元件的$attrs

}"$attrs" v-on=

"$listeners" @showattrs=

"showattrs"

/child-child>

/div>

/template>

import childchild from

'./child-child'

export

default

, components:

, methods:}}

/script>孫子元件：child-child.vue

="child-child"

child-child元件的$attrs

學會使用 attrs跟 listeners

學會使用SafeArray

學會使用Git

學會使用SafeArray

學會使用 attrs跟 listeners

學會使用SafeArray

學會使用Git

學會使用SafeArray

相關推薦