使用场景
在写项目时候发现很多页面中都会用到很多重复的变量,每一个页面都会在发送请求时候将请求结果放在比如xxxxList中,或者分页请求都使用的limit和page,uesrName等等。还有公用的一些计算方法,年月日方法。就想到了vue2中的minix--混入
使用方法
一、创建minixs项目与自定义js文件
二、js文件内容
混入对象可以包含任意组件选项。
当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
钩子函数合并同名钩子函数将混合为一个数组,因此都将被调用。
另外,混入对象的钩子函数将在组件自身钩子函数之前调用
export const Mixins = {
data() {
return {
age: undefined,
idcard:undefined,
phone:undefined,
name:'jack',
num1:1,
num2:undefined
}
},
methods: {
getAge1() {
this.age=18
console.log("age1 =", this.age )
},
getAge2() {
console.log("age2=", this.age )
},
}
}
三、使用
数据对象合并
数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先(组件的data中变量会覆盖混入对象的data中变量)
<template>
<div class='box'>
<h1>2222222222</h1>
<p>姓名 {{ name }}</p>
<p>年龄 {{ age }}</p>
<p>手机 {{ phone || 12345 }}</p>
<p>数字 {{ num1 || 9999 }}</p> <button @click="getnum">+++++</button>
</div>
</template>
<script>
import {Mixins} from "../minixs/testminix"
export default {
mixins:[Mixins],
data() {
return {
num1:18,
};
},
mounted() {
this.getAge1()
},
computed: {},
watch: {},
// 组件方法
methods: {
// 获取num1
getnum(){
this.num1++
}
},
};
</script>