【Vue】强大的Mixin混入

什么是mixin？

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

为什么使用mixin？

vue页面开发时，有些代码在各个页面总是要写很多遍，代码都是一摸一样的，这时就需要mixin了，可以让页面干净整洁，代码量减少，冗余代码减少。

如何使用mixin？

一般来说，注入mixin有两种方式：

举个栗子🌰,以一个简单的数字递增来看：

exampleMixin.js

export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        addCount() {
            setInterval(() => {
                this.count++
            }, 1000)
        }
    },
    created() {
        this.addCount(); // 结果：一秒递增1
    }
}

• 页面自身注入方式：

// test.vue

import mixin from 'mixins/exampleMixin'

export default {
    mixins: [mixin],
    // 业务代码
    .... 
}

• 全局注入方式：

//main.js

import Vue from 'vue';
import mixin from 'mixins/exampleMixin';
Vue.mixin(mixin)