vuemixins與extends的使用方法

這次給大家?guī)韛ue mixins與extends的使用方法，vue mixins與extends使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

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

混合mixins和繼承extends

看看官方文檔怎么寫的，其實兩個都可以理解為繼承，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ù)時，先調(diào)用mixins的函數(shù)，再調(diào)用父組件的函數(shù)。

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

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

extends

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

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

extend

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

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

axios客戶端中ajax請求方式

vue.js vue-router提升用戶體驗

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