vue提供了mixins、extends設定項，最近使用中發現很好用。以下我透過本文為大家介紹下vue中 mixins和extends的巧妙用法，需要的朋友參考下吧
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
結論: 優先呼叫mixins和extends繼承的父類， extends觸發的優先權較高，相對於是佇列
push(extend, mixin1, minxin2, 本身的鉤子函數)
#經過測試， watch的值繼承規則一樣。
繼承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'
}#結論：子類別再次聲明，data中的變數都會被重寫，以子類的為準。
如果子類別不聲明，data中的變數將會最後繼承的父類別為準。
經過測試， props中屬性 、 methods中的方法 和 computed的值 繼承規則一樣。
以下單獨介紹下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用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
