vue中混入mixin的使用

 

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

mixin混入在vue开发中十分常见，它的用法也非常的简单，只需要记住，公共的方法函数属性统统都可以放置到mixin中，主要就是为了复用代码，减少代码冗余，如，公共的请求封装，公共的分页属性，公共的查询跳转等都可以。

先把所用可复用的功能写在一个js文件

export const myMixin= {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('Hello');
        }
    }
};

在自己的组件中

import {myMixin} from './../assets/js/mixin';
export default {
    mixins:[myMixin],
    name: 'test',
    data () {
        return {
            msg: 'Welcome to Your project'
        }
    }
}

这样输出是结果是怎样的呢？

相当于我们自己的组件是这样子的：

export default {

    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your project'
        }
    }，
 created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('Hello');
        }
    }
}

注意：

1. 如果mixin里面有一个created,我们自己的组件里面也有一个created，代码执行是先执行mixin里面的再执行我们自己组件的created，换句话说就是把所有created中的逻辑合并，这里注意不能出现相同的逻辑，不然我们自己组件的就会覆盖掉mixin中的
2. 对于methods，component如果里面都有相同的方法，我们自己的组件中的方法将会覆盖掉mixin中的方法。一切按照我们组件优先的原则