Vue的mixin混入

mixin 实现 Vue 组件中配置项的可复用功能。

把多个组件共用的配置提取成一个混入对象。

一个混入对象可以包含任意组件选项。

1、用法

定义混入：

创建 src/mixin.js

// 一个混入对象
export const mixin1 = {
	methods: {
		showName() {
			alert(this.name);
		},
	},
	mounted() {
		console.log('哈哈')
	},
}

// 一个混入对象
export const mixin2 = {
	data() {
		return {
			aa: 100,
			bb: 200,
		}
	},
}

使用混入：

Saaa.vue

import { mixin1, mixin2 } from '../mixin'
......

// 利用配置项 mixins
mixins: [mixin1, mixin2]

Rbbb.vue

import { mixin1, mixin2 } from '../mixin'
......

// 利用配置项 mixins
mixins: [mixin1, mixin2]

2、选项合并

当组件和混入对象含有同名选项时，

• 数据对象（data）在内部会进行递归合并，并在发生冲突时以组件数据优先。
• 同名钩子函数将合并为一个数组，因此都将被调用。并且混入对象的钩子将在组件自身钩子之前调用。
• 值为对象的选项，例如 methods、components 和 directives
  ，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

3、全局混入

混入也可以进行全局注册。所有组件都可用混入的选项。

谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

main.js

......
import { mixin1, mixin2 } from '../mixin'

Vue.mixin(mixin1)
Vue.mixin(mixin2)
......