在Vue.js中使用Mixins的方法

一个很常见的场景: 有两个非常相似的组件,它们拥有非常相似的基本功能,但是它们之间又有足够的不同的地方,该如何选择呢? 我们是应该将它们分成两个完全不同的组件呢? 还是创建一个基础组件,然后定义足够多的props以方便区分使用场景?

这两种方式都不是完美的: 如果你将它们分成两个完全不同的组件,在需求变化(功能变化)时,可能会增加需要同时修改两个组件的风险,这违反了”DRY”的前提. 另一方面,太多的props很快会让人变得凌乱,并且,迫使维护人员,甚至是你自己,要首先理解这些props的上下文才能使用它,这会让人非常失望.

Vue的Mixins是非常实用的编程方式,因为最终实用的编程是通过不断减少运动部件(moving parts)使代码变得容易理解. (关于这一点,Michael Feathers有一个很好的引用). 一个mixin允许你封装一个功能,以便你能在整个应用程序中的不同组件中使用它. 如果mixin被正确的创建,它们是纯粹的–它们不会修改或更改函数的作用范围(scope)之外的内容,因此,您可以在多个地方执行它们,并且只要输入值相同,总是能非常可靠得得到相同的结果. 这真的非常强大.

认识Mixins

混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。

栗子

假设我们有一些不同的组件,它们的工作是切换状态boolean,一个模态(modal)和一个提示(tooltip). 这些tooltips和modals没有很多共同之处,除了这个功能: 它们看起来不一样,它们使用起来也不尽相同,但是它们的逻辑是相似的 .

rush:js;"> //modal const Modal = { template: '#modal',data() { return { isShowing: false } },methods: { toggleShow() { this.isShowing = !this.isShowing; } } }

//tooltip
const Tooltip = {
template: '#tooltip',methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}

我们可以从中提取逻辑,并创建可以复用的部分：

rush:js;"> const toggle = { data() { return { isShowing: false } },methods: { toggleShow() { this.isShowing = !this.isShowing; } } }

const Modal = {
template: '#modal',mixins: [toggle]
};

const Tooltip = {
template: '#tooltip',mixins: [toggle]
};

duang — 一个小而简单的:chestnut:让我们知道了Mixins对于封装一些可复用的功能如此有趣、方便、实用。

demo地址：https://github.com/hzzly/xyy-vue

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。