基础:
官方解释:混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
(一)举例一:当对象键值对键名冲突时,保留非mixin对象的键值对
var myMixin = {
template: <h1>hello mixin</h1>',
methods: {
hello: function(){
console.log('this is mixin')
},
say: function(){
console.log('I am mixin')
}
}
}
var Component = Vue.extend({
mixins: [myMixin],
methods: {
list: function(){
console.log('I am list')
},
say: function(){
console.log('I am mixin say')
}
}
})
var newcom = new Component().$mount('#box')
newcom.hello();
newcom.list();
newcom.say();
(二)另一种mixin方法
var myMixin={
template:'<h1>holle mixin</h1>',
methods:{
hello:function(){
console.log('this is mixin')
},
say:function(){
console.log('I am mixin')
}
}
};
var app=new Vue({
mixins:[myMixin],
methods:{
lsit:function(){
console.log('I am lsit')
},
say:function(){
console.log('I am mixin say')
}
}
});
app.hello();
app.lsit();
app.say();
输出:
this is mixin
I am list
I am mixin say