Vue学习—深入剖析混入

一、混入

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>