vue的mixin简化开发

vue的mixin可以将多个组件公用的声明周期方法和数据封装成一个对象，在不同的组件中自由插拔。实际做项目的时候，可以定义一些mixin，供多个组件使用。也非常有必要定义一个全局的mixin对象，对所有组件的公共行为进行抽象。

可以使用Vue.mixin来定义全局的mixin，推荐。

也可以定义一个带mixin的对象，所有地方使用它来初始化。例如：

定义

// 定义一个混入对象
const myMixin = {
    data() {
        return {
            version: '1.0.0',
            isApp: isApp()
        }
    },
    created: function () {

    },
    mounted() {
        this.init();
        if (commonSwitch.manualLoading) {
            this.closeLoading();
        }
    },
    methods: {
        init() {
            FastClick.attach(document.body);
        },
        closeLoading() {
            const loading = document.querySelector('.page-loading');
            if (loading) {
                loading.style.display = 'none';
            }
        }
    },
    components: {
        layout: Layout
    }
}

// 定义一个使用混入对象的组件
export const MyVue = Vue.extend({
    mixins: [myMixin]
})

使用

import { MyVue } from '@/assets/js/common/myVue';

new MyVue({
    el: '#my_container',
    data: {
        bannerImgStyle:{},
        moving: false
    },
    methods:{
        ...
    }
    ...
}

用mixin来简化Vue组件的公共行为，是一个不错的选择。

转载于:https://www.cnblogs.com/mengff/p/11077662.html