[JavaScript知识库]在vue中如何使用mixin

摘要

本文介绍了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的本质是合并：

1. 对于组件的生命周期钩子函数，先做mixin中的钩子，然后做组件中的钩子。
2. 对于同名的数据和方法，以组件中的为准。

小结

mixin是一种复用代码的机制。