1. What is mixing
Mixin( mixin): is a very flexible way of distributing reusable functionality in Vue components. A mixin object (mixins) is one js对象that can contain any functional options in the script item in our component, such as data、components、created、methods 、computed、watchetc. When a component uses a mixin object, 所有混入对象的选项将被混入该组件本身的选项.
Mixing in is actually implementing 单一继承sum 多重继承.
Second, local mixing
Partial mix-in is the introduction of mix-in objects in separate vue components mixin.
Create a new mixed-in file loadingMixin.js in the project:
// loadingMixin.js
export default {
data() {
return {
showLoading: false,
};
},
methods: {
showLoadingFun() {
this.showLoading = true;
},
hideLoadingFun() {
this.showLoading = false;
},
},
};
Mix in this class in your component:
<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>
3. Global mix-in
For global mixing, we only need to introduce loadingMixin.js into main.jsit, and then mixinput it into Vue.mixin()the method;
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)
});
Global mix-in is more convenient, we don’t need to declare it in subcomponents, global mix-in will , we need to be careful when using it; after this global mix-in, we can call it directly 影响每一个组件的实例in the component .this.变量/方法mixin混入对象变量/方法
Fourth, the characteristics of mixing
- Mixin can define public variables or methods, but the data in mixin is
不共享true, that is, the mixin instances in each component are different, all单独存在的个体are不存在相互影响; - Mixin mixin objects
值为函数(for example: beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed) function options of the same name will be carried out递归合并为数组, two functions都会执行, but先执行mixin中的同名函数; - Mixin objects with
值为对象the same name (for example: props, data, methods, components) will be executed替换, and组件内the objects with the same name will be executed first, that is, the objects with the same name in the component will be mixed with the objects of the same name覆盖;
The following example can be used to verify:
// 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>