摘要
本文介绍了vue中的mixin的作用,格式,应用场景,注意事项。
作用
多个组件之间复用数据及逻辑。
格式
定义
本质上是导出一个js对象。当然了,这可不是一个普通的js对象:它的结构格式和定义一个组件相同。
export default {
data() {
return {
a: 1
}
},
created() {
setTimeout(() => {
this.a = 100
})
},
methods: {
f1() {
console.log(this.a)
}
}
}
使用
在定义组件时,先导入这个mixin,然后写在mixins配置项中。
import mixin1 from './mixins/mixin1'
export default {
mixins: [mixin1],
created() {
this.f1(); // f1是mixin中定义的
}
}
此时,在这个组件内部,就可以使用数据项a和函数f1了。
应用场景
多个组件之间有共同的代码或者数据需要共享。
优缺点
优点:简单,成本低。
缺点:过多mixin的使用,你都不知道当前数据(或者方法)来自哪里了。
注意事项
mixins的本质是合并:
- 对于组件的生命周期钩子函数,先做mixin中的钩子,然后做组件中的钩子。
- 对于同名的数据和方法,以组件中的为准。
小结
mixin是一种复用代码的机制。