一、基础概念
mixin官方定义
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
理解
将多个组件共用的配置提取成一个混入对象,哪个组件需要用到这些配置时,直接将提取出来的这部分混入(mixin)到组件内部即可
优点
减少代码冗余度,方便后期更好的维护
(mixin相当于组件中的组件,vue组件化开发让我们的代码复用性更高,但是组件与组件之间还有重复的部分,这时我们用mixin将重复的部分再抽离出来)
二、进阶使用
mixin就是一个对象,这个对象内饱含着vue中常用的配置项(data,methods,mounted等)
1、定义混入
在src目录下新建一个mixin.js的文件,里面用写mixin的代码
{
data() {...},
methods:{...},
...
}
2、使用混入
根据不同的业务要求,使用混入分为两种情况:局部混入和全局混入。
局部混入代表哪里组件使用在哪里引入,全局混入表示任何组件都可以使用。
全局混入::Vue.mixin(xxx)
局部混入:mixins:[xxx]
三、实战练习
1、定义一个混入
export const hunhe= {
methods: {
showName(){
console.log(this.name)
}
},
}
我们已经定义完一个混入mixin,接下来该去使用混入。
2、局部混入
<template>
<div>
<p>学生姓名:{{name}}</p>
<button @click="showName">点击弹出学生姓名</button>
</div>
</template>
<script>
//引入mixin
import {hunhe} from "../mixin"
export default {
name:"Student",
data(){
return {
name:"憨瓜"
}
},
//使用混入
mixins:[hunhe]
}
</script>
3、全局混入
在main.js文件中引入混入,使用混入
import Vue from "vue";
import App from "./App.vue";
//引入混入
import { hunhe} from "./mixin";
//使用混入
Vue.mixin(hunhe);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
}).$mount("#app");
以上代码配置完成后,Vue实例对象vm和所有组件实例对象身上都有混入
配置项冲突
1、混入中的data,methods和组件中的data,methods冲突时,以组件中的data和方法为主
2、生命周期钩子冲突时,两者都会出现,并且mixin的先执行
export const hunhe= {
methods: {
showName(){
console.log(this.name)
}
},
//mixin中的数据与组件中的数据冲突,以组件中的数据为主
data(){
return {
x:7
}
},
//生命周期与原组件的冲突,两者都会执行,但mixin中的先执行
mounted() {
console.log('我是mixin的,我先输出')
},
}