对vue的mixin的理解,有什么应用场景?
什么是mixin
官方定义
mixin
(混入),提供了一种非常灵活的方式,来分发 Vue
组件中的可复用功能。
本质其实就是一个js
对象,它可以包含我们组件中任意功能选项,如data
、components
、methods
、created
、computed
等等
我们只要将共用的功能以对象的方式传入 mixins
选项中,当组件使用 mixins
对象时所有mixins
对象的选项都将被混入该组件本身的选项中来
注意事项
当组件存在与mixin
对象相同的选项的时候,进行递归合并的时候组件的选项会覆盖mixin
的选项
但是如果相同选项为生命周期钩子的时候,会合并成一个数组,先执行mixin
的钩子,再执行组件的钩子
使用场景
在日常的开发中,我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码,这些代码的功能相对独立
这时,可以通过Vue
的mixin
功能将相同或者相似的代码提出来
例子
定义一个modal
弹窗组件,内部通过isShowing
来控制显示
const Modal = {
template: '#modal',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
定义一个tooltip
提示框,内部通过isShowing
来控制显示
const Tooltip = {
template: '#tooltip',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
通过观察上面两个组件,发现两者的逻辑是相同,代码控制显示也是相同的,这时候mixin
就派上用场了
首先抽出共同代码,编写一个mixin
const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
两个组件在使用上,只需要引入mixin
const Modal = {
template: '#modal',
mixins: [toggle]
};
const Tooltip = {
template: '#tooltip',
mixins: [toggle]
}
通过上面小小的例子,让我们知道了Mixin
对于封装一些可复用的功能如此有趣、方便、实用