使用場景:
例如我們在Vue單頁面開發的時候當多個組件中都需要下拉刷新,或者使用的都是一個方法的時候,我們就可以使用vue mixins進行封裝調用,以及繼承,具體看代碼。
選項合并
var mixin = {
data: function () {
return {
message: 'hello'
}
},
created:function(){
console.log('我是mixins中的created')
},
methods:{
show:function(num){
console.log(num) //mixins種的函數可以接收組件種的傳參。
},
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
data: function () {
return {
title: 'def',
message: 'goodbye'
}
},
created: function () {
console.log('我是Vue中的created')
console.log(this.$data)
this.show(50); //可通過函數傳參,把組件中需要的參數傳給mixins進行使用。
},
methods:{
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意以下三點:
1、當組件和混入對象含有同名選項時,這些選項將以恰當的方式混合。比如,數據對象在內部會進行淺合并 (一層屬性深度),在和組件的數據發生沖突時以組件數據優先。
2、同名鉤子函數將混合為一個數組,因此都將被調用。另外,混入對象的鉤子將在組件自身鉤子之前調用。
3、值為對象的選項,例如 methods, components 和 directives,將被混合為同一個對象。兩個對象鍵名沖突時,取組件對象的鍵值對。
全局混入
也可以全局注冊混入對象。注意使用! 一旦使用全局混入對象,將會影響到 所有 之后創建的 Vue 實例。使用恰當時,可以為自定義對象注入處理邏輯。
//為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"