Vue混入

　　混合（mixins)是一种分发Vue组件中可复用功能的一种方式，它非常灵活。混合对象可以包含任意组件选项，以组件使用混合对象时，所有混合对象的选项将被混入到这个组件本身的选项。

//定义一个混合对象
let myMixin = {
    created: function () {
        this.fn()
    },
    methods: {
        fn: function () {
            console.log('mixin');
        }
    }

}
//定义一个使用混合对象的组件
let Component = Vue.extend({
    mixins: [myMixin]
})
let Component = new Component();

　　当组件和混合对象有同名的选项时，这些选项以恰当的方式混合。

　　当值为对象的选项，如methods,components，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对；

　　当mixin的数据对象和组件的数组对象发生冲突时，以组件数据优先；

　　同名钩子函数将会混合为一个数组，都将被调用，只是混入对象的钩子在组件自身钩子前调用。

//组件对象的键值对
let mixin = {
    methods: {
        fn: function () {
            console.log('fn');
        },
        fn1: function () {
            console.log('mixin fn1');
        }
    }
}

let vm = new Vue({
    mixins: [mixin],
    methods: {
        fn2: function () {
            console.log('fn2');
        },
        fn1: function () {
            console.log('fn1')
        }
    }
})
vm.fn();  //'fn'
vm.fn2(); //'fn2'
vm.fn1(); // 'fn1'

//组件优先
let mixin = {
    data() {
        return {
            message: 'mixin'
        }
    }
}
new Vue({
    mixins: [mixin],
    data() {
        return {
            message: 'msg-mixin',
        }
    },
    created: function () {
        console.log(this.$data);//{message:'msg-mixin'}
    }
})

//混合对象的钩子函数前调用
let mixin = {
    created: function () {
        console.log('mixin ')
    }
}
new Vue({
    mixins: [mixin],
    created: function () {
        console.log('component')
    }
})
//mixin
// component

　　混合可以分为全局混合还局部混合。全局混合一旦使用，它会注册到每一个单一组件上，将会影响到所有之后创建的vue实例。

//为自定义选项‘myOption'注入处理逻辑
Vue.mixin({
    created: function () {
        let myOption = this.$options.myOption
        myOption === true ? console.log(myOption) : null;
    }
})
new Vue({
    myOption: 'davina'
})
//=>'davina'

　　局部混合也可以称之为自定义选项混合，它使用默认策略，覆盖已有的值。

//注册mixin对象
const mixin = {
    data() {
        return {
            name: 'davina'
        }
    }
}
//导出mixin
export default mixin;

// 在需要的页面引入
import mixin from '@/mixin/mixin'
export default {
    //局部混入
    mixin: [mixin],
    methods: {
        mixClick() {
            //点击按钮时获取mixin混入的数据
            console.log(this.name);
        }
    }
}