一、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
版权声明:本文为博主原创文章,转载请附上博文链接!