这篇文章主要介绍了Vue混入(mixin)的使用方法和注意事项,通过示例代码介绍做详细说明。
提示:以下是本篇文章正文内容,下面案例可供参考
一、什么是混入?
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
分为局部混入和全局混入,一般是局部混入,全局混入注册后,在任意组件都可以使用,谨慎使用全局混入对象,因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。
二、使用场景
多个组件都会使用到的数据和方法,可以使用mixin,通过mixin文件里面定义好属性和方法,组件调用的时候会产生属性和方法的合并,共同使用。其中mixin中的钩子会优先执
三、使用步骤
1.基本使用
mixin相关文件
mixin-test.js
const mixinTest = {
data() {
return {
msg: "这是mixin混入字段",
countNum: 1,
};
},
mounted() {
console.log("mounted1---mixins");
},
methods: {
mixinMethod() {
console.log(this.msg + ",这是mixin混入的方法");
},
addCount() {
this.countNum = +2;
console.log("mixin方法addCount this.countNum", this.countNum);
},
addCountTwo() {
return (this.countNum = +2);
},
},
};
export default mixinTest;
MixinPageA.vue
<template>
<div>
<p>这是MixinOne提示--->{{ hint }}</p>
<p>这是引入mixin中msg--->{{ msg }}</p>
<p>这是引入mixin中countNum--->{{ countNum }}</p>
<p>
<input
class="mixin-button"
type="button"
value="A页面改变mixin值"
@click="changeCount"
/>
</p>
</div>
</template>
<script>
//引入相关js
import mixinTest from "../mixin-test";
export default {
name: "MixinOne",
//引入
mixins: [mixinTest],
props: [""],
data() {
return {
hint: "这是第 [ 一ONE ] 个混入文件",
};
},
created() {
//可以直接使用mixin里面定义变量
console.log("create--one", this.msg);
// 在pageA直接调用mixins里面自增方法, 只会影响pageA里面的值 和PageB页面无关
this.addCount();
},
mounted() {
console.log("mounted--one", this.msg);
},
methods: {
changeCount() {
// this.addCount();
console.log("one-changeCount", this.countNum);
},
},
updated: {},
beforeDestroy: {},
destroyed: {},
};
</script>
<style lang="scss" scoped>
.mixin-button {
border: none;
background: #3c94e8;
color: #fff;
font-size: 14px;
padding: 5px 10px;
margin: 10px 0;
}
</style>
2.多组件同时使用
方法和参数在各组件中不共享,虽然组件调用了mixins并将其属性合并到自身组件中来了,但是其属性只会被当前组件所识别并不会被共享,也就是其他组件无法从当前组件中获取到mixins中的数据和方法。
mixin-main.vue里面引入组件A和组件B,组件A和组件B里面分别同时使用混入mixin,其中组件A对mixin里面字段值进行改变
mixin-main.vue
<template>
<div>
MiminMain
<el-row :gutter="20">
<el-col :span="12"><mixin-one></mixin-one></el-col>
<el-col :span="12"><mixin-two></mixin-two></el-col>
</el-row>
</div>
</template>
<script>
import MixinOne from "./components/MixinPageA.vue";
import MixinTwo from "./components/MixinPageB.vue";
export default {
name: "MiminMain",
components: {
MixinOne,
MixinTwo,
},
props: {},
data() {
return {};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
updated() {},
beforeDestroy() {},
destroyed() {},
};
</script>
<style scoped></style>
MixinPageB.vue
<template>
<div>
<p>这是MixinTWO提示--->{{ hint }}</p>
<p>这是引入mixin中msg--->{{ msg }}</p>
<p>这是引入mixin中countNum--->{{ countNum }}</p>
<p>
<input
class="mixin-button"
type="button"
value="B页面改变mixin值"
@click="changeCount"
/>
</p>
</div>
</template>
<script>
import mixinTest from "../mixin-test";
export default {
name: "MixinTwo",
mixins: [mixinTest],
props: [""],
data() {
return {
hint: "这是第 [ 一TWO ] 个混入文件",
};
},
created() {
console.log("create--two", this.msg);
// this.addCount();
},
mounted() {
console.log("mounted--two", this.msg);
},
methods: {
changeCount() {
// this.addCount();
console.log("two-changeCount", this.countNum);
},
},
updated: {},
beforeDestroy: {},
destroyed: {},
};
</script>
<style lang="scss" scoped>
.mixin-button {
border: none;
background: #3c94e8;
color: #fff;
font-size: 14px;
padding: 5px 10px;
margin: 10px 0;
}
</style>
当组件A对字段值进行改变的时候,组件B无影响
3.存在冲突和合并方式
值为对象(components、methods 、computed、data)的选项,混入组件时选项会被合并,键冲突时优先组件,组件中的键会覆盖混入对象的。当数据对象(data变量)或者对象键名(方法methods、components、directives)出现同名选项时,总会以组件为准。
四、与vuex的区别
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
五、与公共组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。
详细分析可以参考:
https://www.cnblogs.com/gerry2019/p/11889050.html
总结
暂时记录,有需要再补充。