一、什么是混入
混入 (mixin) ： 是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象（mixins）是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、created、methods 、computed、watch等等。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
混入其实就是实现了单一继承和多重继承。
二、局部混入
局部混入就是在单独的vue组件中引入了mixin混入对象。
在项目里新建一个混入文件loadingMixin.js:
// loadingMixin.js
export default {
data() {
return {
showLoading: false,
};
},
methods: {
showLoadingFun() {
this.showLoading = true;
},
hideLoadingFun() {
this.showLoading = false;
},
},
};
在组件中混入此类：
<template>
<div>
<h1>loadingData</h1>
<p v-if="showLoading">loading...</p>
<p v-if="!showLoading">loaded</p>
</div>
</template>
<script>
import mixin from "../mixin/loadingMixin";
export default {
mixins: [mixin],
data() {
return {
list: [],
form: {
},
};
},
mounted() {
// 调用混入显示loading的方法
this.showLoadingFun();
// // 调用混入隐藏loading的方法
this.getList(this.form).then(() => {
this.hideLoadingFun();
});
},
methods: {
getList(form) {
//此方法用来整理查询条件，并调用查询方法
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 5000)
})
},
},
};
</script>
三、全局混入
全局混入我们只需要把loadingMixin.js引入到main.js中，然后将mixin放入到Vue.mixin()方法中即可；
import Vue from 'vue';
import App from './App.vue';
import mixin from "./mixin/loadingMixin";
Vue.config.productionTip = false
Vue.mixin(mixin)
new Vue({
el: '#app',
render: h => h(App)
});
全局混入更为便捷，我们将不用在子组件声明，全局混入将会影响每一个组件的实例，使用的时候需要小心谨慎；这样全局混入之后，我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法。
四、混入的特性
- mixin可以定义公用的变量或方法，但是mixin中的数据是
不共享的，也就是每个组件中的mixin实例都是不一样的，都是单独存在的个体，不存在相互影响的； - mixin混入对象
值为函数（例如：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed）的同名函数选项将会进行递归合并为数组，两个函数都会执行，只不过先执行mixin中的同名函数； - mixin混入对象
值为对象（例如：props,data,methods,components）的同名对象将会进行替换，都优先执行组件内的同名对象，也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖；
可用下面样例进行验证：
// loadingMixin.js
export default {
props: {
id: {
type: String,
default: "loadingMixinId",
},
},
data() {
return {
data1: 1,
};
},
methods: {
method1() {
console.log("loadingMixin");
console.log(this.data1);
console.log(this.id);
},
},
beforeCreate() {
console.log("loadingMixin beforeCreate 实例刚刚被创建1");
},
created() {
console.log("loadingMixin created 实例已经创建完成2");
},
beforeMount() {
console.log("loadingMixin beforeMount 模板编译之前3");
},
/*请求数据，操作dom , 放在这个里面 mounted*/
mounted() {
console.log("loadingMixin mounted 模板编译完成4");
},
beforeUpdate() {
console.log("loadingMixin beforeUpdate 数据更新之前");
},
updated() {
console.log("loadingMixin updated 数据更新完毕");
},
/*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
beforeDestroy() {
console.log("loadingMixin beforeDestroy 实例销毁之前");
},
destroyed() {
console.log("loadingMixin destroyed 实例销毁完成");
},
};
// HelloWorldId.vue
<template>
<div>
<p @click="method1">Click</p>
</div>
</template>
<script>
import mixin from "../mixin/loadingMixin";
export default {
mixins: [mixin],
props: {
id: {
type: String,
default: 'HelloWorldId'
}
},
data() {
return {
data1: 2,
};
},
methods: {
method1() {
console.log('HelloWorld');
console.log(this.data1);
console.log(this.id);
}
},
beforeCreate() {
console.log("HelloWorld beforeCreate 实例刚刚被创建1");
},
created() {
console.log("HelloWorld created 实例已经创建完成2");
},
beforeMount() {
console.log("HelloWorld beforeMount 模板编译之前3");
},
/*请求数据，操作dom , 放在这个里面 mounted*/
mounted() {
console.log("HelloWorld mounted 模板编译完成4");
},
beforeUpdate() {
console.log("HelloWorld beforeUpdate 数据更新之前");
},
updated() {
console.log("HelloWorld updated 数据更新完毕");
},
/*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
beforeDestroy() {
console.log("HelloWorld beforeDestroy 实例销毁之前");
},
destroyed() {
console.log("HelloWorld destroyed 实例销毁完成");
},
};
</script>