混入 (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>loadingDatah1>
<p v-if="showLoading">loading...p>
<p v-if="!showLoading">loadedp>
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实例都是不一样的,都是单独存在的个体
,不存在相互影响
的;值为函数
(例如:beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed)的同名函数选项将会进行递归合并为数组
,两个函数都会执行
,只不过先执行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">Clickp>
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>