詳解vue mixins和extends的巧妙用法

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

混合mixins和繼承extends

看看官方文檔怎么寫的，其實(shí)兩個都可以理解為繼承，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')
 }
}

控制臺輸出

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)先級高會被mixins覆蓋
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app'
}
// 只寫出子類，name = 'mixin1 name'，mixins后面繼承會覆蓋前面的
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)先級均次于父組件

extend

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

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

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

總結(jié)

以上所述是小編給大家介紹的vue mixins和extends的巧妙用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

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