在Vue.js中如何使用Mixins？
公冶嘉
一个很常见的场景:
有两个非常相似的组件
,
它们拥有非常相似的基本功能
,
但是它们之间又有足够的不同的地方
,
该如何选择呢
?
我们是应该将它们分成两个完全不同的组件呢
?
还是创建一个基础组件
,
然后定义足够多的
props
以方便区分使用场景
?
这两种方式都不是完美的:
如果你将它们分成两个完全不同的组件
,
在需求变化
(
功能变化
)
时
,
可能会增加需要同时修改两个组件的风险
,
这违反了
”DRY”
的前提
.
另一方面
,
太多的
props
很快会让人变得凌乱
,
并且
,
迫使维护人员
,
甚至是你自己
,
要首先理解这些
props
的上下文才能使用它
,
这会让人非常失望
.
Vue
的
Mixins
是非常实用的编程方式
,
因为最终实用的编程是通过不断减少运动部件
(moving parts)
使代码变得容易理解
. (
关于这一点
, Michael Feathers
有一个很好的引用
).
一个
mixin
允许你封装一个功能
,
以便你能在整个应用程序中的不同组件中使用它
.
如果
mixin
被正确的创建
,
它们是纯粹的
–
它们不会修改或更改函数的作用范围
(scope)
之外的内容
,
因此
,
您可以在多个地方执行它们
,
并且只要输入值相同
,
总是能非常可靠得得到相同的结果
.
这真的非常强大
.
认识Mixins
混合 (mixins)
是一种分发 Vue
组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。
栗子
假设我们有一些不同的组件,
它们的工作是切换状态
boolean,
一个模态
(modal)
和一个提示
(tooltip).
这些
tooltips
和
modals
没有很多共同之处
,
除了这个功能
:
它们看起来不一样
,
它们使用起来也不尽相同
,
但是它们的逻辑是相似的
.
//modal
const Modal = {
template: '#modal',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !
this.isShowing;
}
}
}
//tooltip
const Tooltip = {
template: '#tooltip',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !
this.isShowing;
}
}
}
我们可以从中提取逻辑,
并创建可以复用的部分：
const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !
this.isShowing;
}
}
}
const Modal = {
template: '#modal',
mixins: [toggle]
};
const Tooltip = {
template: '#tooltip',
mixins: [toggle]
};
来源：Hzzly
类似资料：