定义
混入是一种分发Vue组件中可复用功用异常天真的体式格局。混入对象能够包含恣意组件选项。当组件运用混入对象时,一切混入对象的选项将被混入该组件自身的选项。
例子:
//定义一个混入对象
var myMixin={
created:function(){
this.hello();
},
methods:{
hello:function(){
console.log('hello from mixin');
}
}
}
//定义一个运用混入对象的组件
var Component = Vue.extend({
mixins:[myMixin]
})
var component = new Component();=>hello from mixin
选项兼并
当组件和混入对象含有同名选项时,这些选项将以适当的体式格局夹杂。
比方,数据对象在内部会举行递归兼并,在和组件的数据发生争执时以组件数据优先。
var mixin ={
data:function(){
return{
messageL:'hello',
foo:'abc'
}
},
created(){
console.log('混入对象的钩子被挪用')
}
}
new Vue({
mixins:[mixin],
data:function(){
return{
message:'goodbye',
bar:'def
}
},
created:function(){
console.log('组件钩子被挪用')
console.log(this.$data);
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
值为对象的选项,比方methods,components和directives,将被夹杂为同一个对象。两个对象键名争执时,取组件对象的键值对。
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()//form self
全局混入
也能够全局注册混入对象。注重运用!一旦运用全局混入对象,将会影响到一切以后建立的Vue实例。运用适当时,能够为自定义对象注入处置惩罚逻辑。
//为自定义的选项myOption注入一个处置惩罚器。
Vue.mixin({
creted:function(){
var myOption = this.$options.myOption;
if(myOption){
console.log(myOption)
}
}
})
new Vue({
myOption:'hello'
})
郑重运用全局混入对象,由于会影响到每一个零丁建立Vue实例(包含第三方模板)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。也能够将其用作Plugins以防止发生反复作用。
自定义选项兼并战略
自定义选项将运用默许战略,即简朴的掩盖已有值。假如想让自定义选项以自定义逻辑兼并,能够向Vue.config.optionMergeStrategies增加一个函数:
Vue.config.optionMergeStrategies.myOption=function(toVal,fromVal){
return mergedVal
}
关于大多数对象选项,能够运用methods的兼并战略:
var strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods