VUE项目开发中使用mixins

一、mixins(混入)的认识

请参考官方文档
二、mixins的使用

个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改
1、在assets文件夹下创建一个js文件

// 创建一个需要混入的对象 
export const mixinTest1 = {
    created() {
        this.hello();
    },
    methods: {
        hello() {
            console.log('mixinTest1');
        }
    }
};
1
2
3
4
5
6
7
8
9
10
11
2、在组件中使用刚刚创建的混入

import {mixinTest1} from './../assets/js/mixin';
export default {
    mixins:[mixinTest1],
    name: 'hello',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
这样就可以直接调用到混入对象中的hello方法
3、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)

4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

...
methods: {
    handlePlaylist() {
        throw new Error('component must implement handlePlaylist method')
    }
}
...
--------------------- 
作者：水痕01 
来源：CSDN 
原文：https://blog.csdn.net/kuangshp128/article/details/78169266 
版权声明：本文为博主原创文章，转载请附上博文链接！