十、vue mixins 的用法

vue中mixins個人理解就是定義一些公用的比較常用的方法，類似我們vue中將一些常用的組件也會抽離出來做成一個公共組件一樣，只不過vue中mixins是定義的是法或者計算屬性,然后將其混入（合並）到各個組件中使用,方便管理與統一修改。下面舉例一些簡單的引用用於自己理解和記憶：

• 先定義一個mixins

// 創建一個需要混入的對象 
export const mixinHello = {
    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中的方法。一切按照我們組件優先的原則

例如：

 

明白了吧？是不是很簡單哦~~