vue mixins应用场景

Posted 2020-11-20 qq735675958

学习知识得在应用场景中去应用，这样才能真正学到东西，记忆也深刻，以后碰到类似的东西就会了。

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‘)
    }
}
...

　　其实我是抄别人的，我认为并不可耻，重要的是自己能理解就行了，不在乎别人的看法。能学到知识就是好的。哈哈