vue混入【mixin】

什么是混入

混入可以理解为一个公共js组件，这个公共组件是将公用的js代码(vue各个组件相同的钩子函数抽离出来写成一个混入对象) 来达到vue组件的可复用性，减少代码重复

混入的实例【局部注入】

混入对象 【mixin.js】

// 全局变量
const info = {
	title: '',
}
function from(from) {
	return {
		mounted() {
			console.log(from); // 接收混合组件过来的参数
			info.title = from.name  // 将混入接收过来的对象赋值给全局变量 info
		},
	}
}

function mixin() {
	return {
		mounted() {
			// 将全局变量赋值给弹窗 
			this.title = info.title
		},
	}
}
// 导出混入
export {
from,
	mixin
}

混入组件A【mixinA.vue】

<template>
<div>
	<h2 style="margin: 10px 0; text-align: center; color: #03a9f4">
		{{title}}
	</h2>
	<mixin-com :title="title"></mixin-com>
	</div>
</template>

<script>
	import mixinCom from "./components/mixinCom.vue";
	import { mixin, from } from "./utils/mixin"; // 引入混合
	const fromData = {
		name: "混合组件A",
		id: "aaaa",
	};
	export default {
		components: { mixinCom },
		name: "VueAdminTemplateMixinA",
		// from(fromData) 向混合中传递参数
		mixins: [ from(fromData) , mixin(),], //注册混合
		data() {
			return {
				title: "",
			};
		},
	};
</script>

混入组件B【mixinB.vue】

<template>
<div>
	<h2 style="margin: 10px 0; text-align: center; color: #03a9f4">
		{{title}}
	</h2>
	<mixin-com :title="title"></mixin-com>
	</div>
</template>

<script>
	import mixinCom from "./components/mixinCom.vue";
	import { mixin ,from } from "./utils/mixin"; // 引入混合
	const fromData = {
		name:'混合组件B',
		id:'bbbb',
	}
	export default {
		components: { mixinCom },
		name: "VueAdminTemplateMixinB",
		// from(fromData) 向混合中传递参数
		mixins: [ from(fromData) , mixin(),], //注册混合
		data() {
			return {
				title:''
			};
		},
	};
</script>

混入注意事项

⚠️混入注意事项
1.  mixins: [ from(fromData) , mixin(),] 
    混合注入后引入的顺序 就是混入中钩子的执行顺序
2. 
	如果组件中data的值与混入中data的值一致vue会优先选择组件中  
	data的值
	组件中的钩子与混合中的钩子 vue会选择两者都执行

全局混合【main.js】

import { mixin ,from } from "./utils/mixin"; // 引入混合

Vue.mixin(mixin)
Vue.mixin(from)
//引入全局混合，vue项目会全局执行