Vue：mixin

mixin

mixin是vue提供的一个功能，意为混入。他用起来像共享一个js，实际的效果又不太像，下面具体来说下

局部mixin

1. 定义一个共用的js文件，定义的json对象里的属性需要是组件实例可以编写的属性，比如created，mounted，data()，methods等等：

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

2. 引入此js文件，如下：

<template>
	<div>
		<h2 @click="showName">学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
	</div>
</template>

<script>
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		mixins:[hunhe,hunhe2]
	}
</script>

到这其实就搞定了，但上面只是理想情况。万一混入的内容和本身的内容冲突了呢，那要以谁的为准，还是追加的关系？
给结论：如果是data中的属性冲突了，已当前组件实例的为准。其他情况都是追加，且混合的是追加在前面。

全局混合

全局混合是所有的组件都是进行混合;在main.js中加入如下代码：

import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

然后其他组件都不需要做任何修改，自动混入相关代码。

总结：mixin平时使用的不多；有用的话还是局部混入居多。