1、概念

mixin混入提供了一种非常灵活的方式来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混合进入该组件本身的选项。

2、功能

混入可以将多个组件中的公共配置提取成一个混入对象，这样就可以实现代码复用。

3、语法

混入和过滤器等配置类似，有全局混入和局部混入两种使用方式。

4、代码实现

第一步

在src文件夹下新建名为mixin文件夹，在mixin文件夹下新建名为index的点.js文件。

第二步

在index文件中写入以下代码，不仅仅是以下代码，组件中的生命周期和方法都可以在此文件中写入。

export default {
	data() {
		return {
			mixinData: {
				name: '混入的data数据',
				value: 86
			}
		};
	},
	created() {
		console.log('混入的created生命周期');
	},
	
	methods: {
		mixinFn() {
			console.log('混入方法');
		}
	}
};

4.1、全局混入

实现混入

全局注册一个混入，影响注册之后所有创建的每个vue实例。使用混入可以向组件注入自定义的行为，但是不推荐在应用代码中使用。在main.js中全局混入，其中参数mixin是一个对象，里面包含混入的所有组件配置。有时候会打印多次混入内容，这是因为使用了多次嵌套组件，每一个组件都会加载一次created方法。因此mixin在实际生产环境中不建议使用全局混入。

import mixin from './mixin/index.js';

Vue.mixin(mixin);

使用全局混入

<template>
	<div>
		<button @click="mixinFn">点我打印信息</button>
		<div>{{ mixinData.name }}</div>
		<div>{{ mixinData.value }}</div>
	</div>
</template>

export default {
	name: 'inexView',
	data() {
		return { }
	}
}

4.2、局部混入

将定义好的混入对象引入要用的组件。它和全局混入的方式不同，不需要在main.js中引入。同全局混入一样，其中参数mixin是一个对象，里面包含混入的所有组件配置。在组件中引入使用即可。

<template>
	<div>
		<button @click="mixinFn">点我打印信息</button>
		<div>{{ mixinData.name }}</div>
		<div>{{ mixinData.value }}</div>
	</div>
</template>

import mixin from '@/mixin/index.js';

export default {
	name: 'inexView',
	mixins: [mixin],
	data() {
		return { }
	}
}

5、混入规则

规则一

数据对象内部，如果是基本类型的变量，那么组件中变量会覆盖混入中定义的变量。如果是引用数据类型，在内部会进行递归合并，并在发生冲突时以组件数据优先。

规则二

生命周期钩子冲突时，会执行两遍，先执行混入中的生命周，然后执行组件中的生命周期。混入配置同上。

规则三

值为对象的其他配置，比如methods等，会合并成一个对象，然后取组件中的键值执行。混入配置同上。