混入 (mixin) 提供了一種非常靈活的方式你踩，來分發(fā) Vue 組件中的可復(fù)用功能叹洲。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)击你，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)剃氧。
基礎(chǔ)
// 定義一個(gè)混入對象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定義一個(gè)使用混入對象的組件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
選項(xiàng)合并
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
同名鉤子函數(shù)將合并為一個(gè)數(shù)組敏储，因此都將被調(diào)用。另外朋鞍，混入對象的鉤子將在組件自身鉤子之前調(diào)用已添。
var mixin = {
created: function () {
console.log('混入對象的鉤子被調(diào)用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('組件鉤子被調(diào)用')
}
})
// => "混入對象的鉤子被調(diào)用"
// => "組件鉤子被調(diào)用"
值為對象的選項(xiàng)，例如 methods滥酥、components 和 directives更舞，將被合并為同一個(gè)對象。兩個(gè)對象鍵名沖突時(shí)坎吻，取組件對象的鍵值對缆蝉。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
全局混入
混入也可以進(jìn)行全局注冊。使用時(shí)格外小心瘦真！一旦使用全局混入刊头，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí)诸尽，這可以用來為自定義選項(xiàng)注入處理邏輯原杂。
// 為自定義的選項(xiàng) 'myOption' 注入一個(gè)處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
自定義選項(xiàng)合并策略
自定義選項(xiàng)將使用默認(rèn)策略您机，即簡單地覆蓋已有值穿肄。如果想讓自定義選項(xiàng)以自定義邏輯合并年局，可以向 Vue.config.optionMergeStrategies 添加一個(gè)函數(shù)：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
對于多數(shù)值為對象的選項(xiàng)，可以使用與 methods 相同的合并策略：
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
可以在 Vuex 1.x 的混入策略里找到一個(gè)更高級的例子：
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}
