一、混入
1.基础
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
<div id="app">
<my-cmp></my-cmp>
</div>
<script>
const minxin = {
data(){
return {
a: 'a'
}
}
};
Vue.component('my-cmp', {
mixins: [minxin],
mounted(){
console.log(this.a);
},
template: `
<div>my-cmp</div>
`
});
const vm = new Vue({
el: '#app',
data: {
}
});
</script>
2.选项合并
当组件和混入对象含有同名选项时，这些选项会以恰当的方式进行“合并”。
合并数据，以组件数据优先：
<div id="app">
<my-cmp></my-cmp>
</div>
<script>
const minxin = {
data(){
return {
a: 'min-a'
}
}
};
Vue.component('my-cmp', {
mixins: [minxin],
data(){
return {
a: 'my-a'
}
},
mounted(){
console.log(this.a);
},
template: `
<div>my-cmp</div>
`
});
......
</script>
合并钩子函数，将合并为一个数组。先调用混入对象的钩子，再调用组件自身钩子。
const minxin = {
data(){
return {
a: 'min-a'
}
},
mounted () {
console.log('min混入对象钩子')
}
};
Vue.component('my-cmp', {
mixins: [minxin],
data(){
return {
a: 'my-a'
}
},
mounted(){
console.log('my组件钩子');
},
template: `
<div>my-cmp</div>
`
});
合并值为对象的选项，如 methods、components 等，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
3.全局混入
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
<div id="app">
<my-cmp></my-cmp>
</div>
<script>
Vue.mixin({
created () {
var all = this.$options.all;
if (all) {
console.log('all')
}
}
});
Vue.component('my-cmp', {
all: 'all',
data(){
return {
a: 'my-a'
}
},
template: `
<div>my-cmp</div>
`
});
const vm = new Vue({
el: '#app',
data: {
}
});
</script>
