1. 程式人生 > >vue mixins應用場景

vue mixins應用場景

應用 welcome vue.js 使用 hand handle and 大於 IV

學習知識得在應用場景中去應用,這樣才能真正學到東西,記憶也深刻,以後碰到類似的東西就會了。

1、在assets文件夾下創建一個js文件

// 創建一個需要混入的對象 
export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log(‘mixinTest1‘);
        }
    }
};

2、在組件中使用剛剛創建的混入

import {mixinTest1} from ‘./../assets/js/mixin‘;
export default {
    mixins:[mixinTest1],
    name: ‘hello‘,
    data () {
        return {
            msg: ‘Welcome to Your Vue.js App‘
        }
    }
}

3、如果組件中定義的方法與混入對象中的方法/屬性一樣,組件中的優先級大於混入對象中的(方法會調用多次);

4、混入對象中可以定義抽象方法,使用混入的組件必須重寫該方法

...
methods: {
    handlePlaylist() {
        throw new Error(‘component must implement handlePlaylist method‘)
    }
}
...

  其實我是抄別人的,我認為並不可恥,重要的是自己能理解就行了,不在乎別人的看法。能學到知識就是好的。哈哈

vue mixins應用場景