VUE大神的成长之路--混合

基础：
官方解释：混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

（一）举例一：当对象键值对键名冲突时，保留非mixin对象的键值对
var myMixin = {
template:

hello mixin

',
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:'

holle mixin

',
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