在vue中詳細(xì)介紹mixins和extends用法

vue提供了mixins、extends配置項(xiàng)，最近使用中發(fā)現(xiàn)很好用。

混合mixins和繼承extends

看看官方文檔怎么寫的，其實(shí)兩個(gè)都可以理解為繼承，mixins接收對象數(shù)組（可理解為多繼承），extends接收的是對象或函數(shù)（可理解為單繼承）。

繼承鉤子函數(shù)

const extend = {
 created () {
 console.log('extends created')
 }
}
const mixin1 = {
 created () {
 console.log('mixin1 created')
 }
}
const mixin2 = {
 created () {
 console.log('mixin2 created')
 }
}
export default {
 extends: extend,
 mixins: [mixin1, mixin2],
 name: 'app',
 created () {
 console.log('created')
 }
}

控制臺(tái)輸出

extends created
mixin1 created
mixin2 created
created

繼承methods

const extend = {
 data () {
 return {
 name: 'extend name'
 }
 }
}
const mixin1 = {
 data () {
 return {
 name: 'mixin1 name'
 }
 }
}
const mixin2 = {
 data () {
 return {
 name: 'mixin2 name'
 }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
 return {
 name: 'name'
 }
 }
}
// 只寫出子類，name = 'mixin2 name'，extends優(yōu)先級(jí)高會(huì)被mixins覆蓋
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只寫出子類，name = 'mixin1 name'，mixins后面繼承會(huì)覆蓋前面的
export default {
 mixins: [mixin2, mixin1],
 extends: extend,
 name: 'app'
}

下面單獨(dú)介紹下mixins、extends、extend

mixins

調(diào)用方式: mixins: [mixin1, mixin2]

是對父組件的擴(kuò)充，包括methods、components、directive等。。

觸發(fā)鉤子函數(shù)時(shí)，先調(diào)用mixins的函數(shù)，再調(diào)用父組件的函數(shù)。

雖然也能在創(chuàng)建mixin時(shí)添加data、template屬性，但當(dāng)父組件也擁有此屬性時(shí)以父為準(zhǔn)，從這一點(diǎn)也能看出制作者的用心（擴(kuò)充）。

data、methods內(nèi)函數(shù)、components和directives等鍵值對格式的對象均以父組件/實(shí)例為準(zhǔn)

extends

調(diào)用方式: extends: CompA

同樣是對父組件的擴(kuò)充，與mixins類似，但優(yōu)先級(jí)均次于父組件

extend

擴(kuò)展組件的構(gòu)造器

當(dāng)我們調(diào)用vue.component('a', {...})時(shí)自動(dòng)調(diào)用

值得注意的是extend內(nèi)的data為一個(gè)函數(shù)

上面是我整理給大家的，希望今后會(huì)對大家有幫助。

相關(guān)文章：

在Angular中如何實(shí)現(xiàn)table表格排序

在Angular中如何實(shí)現(xiàn)驗(yàn)證

有關(guān)于JavaScript使用中Object值如何合并

有關(guān)JavaScript的偽數(shù)組用法（詳細(xì)教程）

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com