Vue 元件多級繼承 繼承全部屬性

2021-10-12 12:49:41 字數 2649 閱讀 3898

在b元件中新增v-bind="$attrs"v-on="$listeners"兩個屬性即可`

a 元件中:
這樣在a中就能使用b的屬性和繫結的方法了

元件之間相互傳遞資料、方法,就可以理解為元件之間的通訊。比如a元件傳乙個物件給b元件,這就是通訊。

使用props或vuex可以實現。具體實現可參考:

但他們各有缺陷:

如果僅僅使用vuex,來實現元件通訊,則就有點殺雞用牛刀了。

使用props, 在多級包含關係的元件之間傳遞又太麻煩。

使用v-bind="$attrs"v-on="$listeners"。看下面這個例子

現在有一下三個元件:

grandfather元件:

這個元件內部包含了乙個father元件,並為father元件傳遞了四個引數和2個方法。

father元件

在father元件中,只遞迴一了兩個入參:name和age。使用了v-bind=「att

rs"屬

性,該屬

性包含了

父作用域

中不作為

prop

被識別(

且獲取)

的特性綁

定(cl

ass和

styl

e除外)

。未識別

的事件通

過『v−

on="

attrs" 屬性,該屬性包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (class 和 style 除外)。未識別的事件通過`v-on="

attrs"

屬性,該

屬性包含

了父作用

域中不作

為pro

p被識別

(且獲取

)的特性

繫結(c

lass

和sty

le除外

)。未識

別的事件

通過『v

−on=

"listeners」`傳入

son元件

}  在$attrs裡面只會有props沒有註冊的屬性

}

結果

載入爺爺元件grandfather,執行結果如下:

son 

son

gr 666

gr 999

頁面上顯示:

在$attrs裡面只會有props沒有註冊的屬性

666

從結果分析:

1.在兒子元件中,console.log(『son』, this.$attrs);的結果為什麼是

在爸爸節點中呼叫兒子元件時,使用了v-bind="att

rs"。

在兒子節

點中的v

m.

attrs"。在兒子節點中的vm.

attrs"

。在兒子

節點中的

vm.attrs只會包含父節點中沒有繫結的屬性。爺爺那裡傳過來了name, age, gender, sdf。其中name age在爸爸那裡已經定義了,gender在兒子的props裡也定義了。所以只有sdf沒有定義,結果中就只有sdf屬性了

2.在兒子元件中,console.log(『son』, this.$listeners);的結果為什麼是son

通過list

ener

s傳遞了

爺爺中的

方法到孫

子元件,

但是在孫

子元件中

,不能直

接使用該

方法,哪

怕將同名

方法暴露

在孫子的

prop

s中,在

孫子元件

裡也不能

使用爺爺

傳過來的

方法。可

以通過v

m.

listeners傳遞了爺爺中的方法到孫子元件,但是在孫子元件中,不能直接使用該方法,哪怕將同名方法暴露在孫子的props中,在孫子元件裡也不能使用爺爺傳過來的方法。可以通過vm.

listen

ers傳

遞了爺爺

中的方法

到孫子組

件,但是

在孫子組

件中,不

能直接使

用該方法

,哪怕將

同名方法

暴露在孫

子的pr

ops中

,在孫子

元件裡也

不能使用

爺爺傳過

來的方法

。可以通

過vm.

listeners.方法名() 的方式來使用爺爺傳遞的方法

4.如何理解頁面上顯示的666

子元件中的gender屬性是props中的屬性,在爺爺元件中傳入了gender的值是666。所以,通過$atter可以直接在爺爺元件傳遞資料給孫子元件

繼承 繼承介面和實現

在繼承體系中有的時候希望只繼承乙個介面,例如在圖形體系中繼承draw 函式,因為每個圖形都有不同的畫法,所以只能繼承乙個介面,具體怎麼畫要到派生類中具體實現。所以要定義如下 class shape class rectangle public shape class angle public sha...

類繼承 繼承類的建構函式

派生類不能直接訪問基類的私有成員,必須通過基類提供的公有方法。派生類不能繼承基類的建構函式,因為建構函式和成員函式存在區別 建構函式用於建立新的物件,而其他成員函式是被現有的物件呼叫。派生類建構函式必須使用基類的建構函式。建立派生類物件時,先建立基類物件,因此基類物件應該在進入派生類建構函式之前被建...

C 類繼承 繼承後函式的值

類的繼承會首先尋找基類,若基類未實現,則會尋找派生類的函式 1.class繼承,函式不繼承 include class base base int a void seta class a public base a void seta class b public base b void seta ...