Vue 中 mixin 混入用法简述

混入

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

基础使用

	// src/mixins/mixin.js文件
	export default {
	    data(){
	        return {
	            name: 'mixin文件属性'
	        }
	    },
	    methods: {
	        getData: () => {
	        	console.log('getData运行打印'+this.name);
	        }
	    },
	    created: function() {
	        this.getData()
	    },
	}

	// xxx.vue
	<template></template>
	<script>
		import mixin from '@mixins/mixin'
		export default {
		  mixins: [mixin]
		}
	</script>

	// 运行输出	getData运行打印mixin文件属性

选项合并 - data属性冲突

	// src/mixins/mixin.js文件
	export default {
	    data(){
	        return {
	            name: 'mixin文件属性',
	            age: 10
	        }
	    }
	}

	// xxx.vue
	<template></template>
	<script>
		import mixin from '@mixins/mixin'
		export default {
			mixins: [mixin],
			data: function () {
			    return {
			      	name: 'component文件属性',
		            sex: "男"
			    }
		    },
		    created: function () {
			    console.log(this.$data)		// { name: "component文件属性", age: 10, sex: "男" }
		  	}
  		},
	</script>

选项合并 - methods方法冲突

	// src/mixins/mixin.js文件
	export default {
		methods: {
			foo: function () {
				console.log('mixin foo')
			},
			conflicting: function () {
				console.log('mixin conflicting')
			}
		}
	}

	// xxx.vue
	<template></template>
	<script>
		import mixin from '@mixins/mixin'
		export default {
		  	mixins: [mixin],
				methods: {
				bar: function () {
					console.log('component bar')
				},
				conflicting: function () {
					console.log('component conflicting')
				}
			},
			created: function () {
				this.foo() 				// mixin foo
				this.bar() 				// component bar
				this.conflicting() 		// component conflicting
		    }
		},

	</script>
	

选项合并 - 钩子函数冲突

	// src/mixins/mixin.js文件
	export default {
		created: function () {
			console.log('mixin created')
	    }
	}

	// xxx.vue
	<template></template>
	<script>
		import mixin from '@mixins/mixin'
		export default {
			mixins: [mixin],
		  	created: function () {
				console.log('component created')
	    	}
		},
	</script>

	// 运行输出
	// mixin created
	// component created
	

全局混入

混入也可以进行全局注册，使用时格外小心！
请谨慎使用全局混入，一旦使用全局混入，它将影响每一个之后创建的 Vue 实例 (包括第三方组件)
使用恰当时，这可以用来为自定义选项注入处理逻辑
大多数情况下，只应当应用于自定义选项，就像上面示例一样
推荐将其作为插件发布，以避免重复应用混入

	// src/main.js
	new Vue({
	  	myOption: 'hello!'
	})
	
	// src/mixins/mixin.js文件
	export default {
		created: function () {
			var myOption = this.$options.myOption
			if (myOption) {
				console.log(myOption);	// hello!
			}
		}
	}