码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！
在web前端的发展中，组件化、模块化的思想一直在贯彻目前的技术发展。
组件的一大重要作用就是可复用，我封装完组件之后，可以在任何地方重复使用我的组件，不需要多次开发。正所谓，一次封装，多次使用。
然而组件和组件之间，其实也有很多的功能可以复用。
我们简单举个例子，一个提示框组件，一个模态框组件。它们在展示形态上有所不同，但是它们触发的机理基本一样，都是通过触发条件的出现，改变v-if的值，从而实现组件的展示。
也就是说，虽然它们两个组件间有逻辑重复的功能，这就可以进行复用，从而提高我们的开发效率。
vue提供了一套可复用&组合的混入偷懒技术mixin。
为什么叫它偷懒技术呢，因为复用本来就是为了“偷懒”，更加专注有效操作，将无效操作尽量减少。
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
先来个小例子，展示一下mixin的使用。
<div id="app">
{
{
msg}}
</div>
<script>
const myMixin = {
data () {
return {
msg:123
}
},
created () {
this.sayHello();
},
methods: {
sayHello(){
console.log('hello mixin');
}
}
}
new Vue({
el:'#app',
data:{
title:'Ray'
},
mixins: [myMixin],
});
</script>
我们写了一个局部组件myMixin，在一个实例化的vue中，我们写了一个和data同级的mixins属性，以数组的形式放入我们之前写的局部组件的名字。在这里也可以看出，mixins中可以放的不止一个组件，也就是说，我们可以将我们想复用的任何组件都放进入。
然后我们看下页面的渲染。
它成功的执行了myMixin中的方法和钩子函数的内容。
这是mixin最基本的使用。
下面我们以一个开发中的实际案例，展示一下mixin在实际开发中的使用。
const toggleShow = {
data () {
return {
isShow:false
}
},
methods: {
toggleShow(){
console.log("点击！");
this.isShow = !this.isShow;
}
}
}
const Model = {
template:`
<div v-if='isShow'>
<h3>模态框组件</h3>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
const Toast = {
template:`
<div v-if='isShow'>
<h2>提示框组件</h2>
</div>
`,
// 局部的mixin
mixins: [toggleShow]
}
new Vue({
el:'#app',
data:{
},
components: {
Model,
Toast
},
template:`
<div>
<button @click='handleModel'>模态框</button>
<button @click='handleToast'>提示框</button>
<Model ref='model'></Model>
<Toast ref='toast'></Toast>
</div>
`,
methods:{
handleModel(){
this.$refs.model.toggleShow();
},
handleToast(){
this.$refs.toast.toggleShow();
}
}
});
</script>
现在有一个局部组件Model为模态框，一个局部组件Toast为提示框。
它们看起来不一样，用法不一样，但是逻辑一样，都是切换v-if的boolean值。
然后我们又写了一个局部组件toggleShow，这个组件就是被我们重复复用的组件，用于提供模态框和提示框都需要的逻辑功能。
并且我们在Model和Toast都通过 mixins: [toggleShow] 调用了这个被复用组件。
然后我们在一个实例化的vue中使用一下这两个组件，并且给他们绑定ref属性，用于调用它们的toggleShow方法，实现展示的效果。
我们看一下页面的实际渲染情况：
没有任何问题，通过我们点击按钮，模态框和提示框都完成了相应的展示。
我们实现了从toggleShow组件中抽离功能，分发给Model和Toast组件的效果。
这就是mixin在我们实际的工作开发中的使用，还是非常好用的，可以将组件中可以被复用的功能，继续抽离出来，分发给需要的组件。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
