溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue提供了mixins、extends配置項，最近使用中發現很好用。
混合mixins和繼承extends
看看官方文檔怎么寫的，其實兩個都可以理解為繼承，mixins接收對象數組（可理解為多繼承），extends接收的是對象或函數（可理解為單繼承）。
繼承鉤子函數
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優先級高會被mixins覆蓋
export default {
mixins: [mixin1, mixin2],
extends: extend,
name: 'app'
}
// 只寫出子類，name = 'mixin1 name'，mixins后面繼承會覆蓋前面的
export default {
mixins: [mixin2, mixin1],
extends: extend,
name: 'app'
}
下面單獨介紹下mixins、extends、extend
mixins
調用方式: mixins: [mixin1, mixin2]
是對父組件的擴充，包括methods、components、directive等。。。
觸發鉤子函數時，先調用mixins的函數，再調用父組件的函數。
雖然也能在創建mixin時添加data、template屬性，但當父組件也擁有此屬性時以父為準，從這一點也能看出制作者的用心（擴充）。
data、methods內函數、components和directives等鍵值對格式的對象均以父組件/實例為準
extends
調用方式: extends: CompA
同樣是對父組件的擴充，與mixins類似，但優先級均次于父組件
extend
擴展組件的構造器
當我們調用vue.component('a', {...})時自動調用
值得注意的是extend內的data為一個函數
總結
以上所述是小編給大家介紹的vue mixins和extends的巧妙用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
