在 Vue.js 中使用Mixin —— CSS-Tricks
http://zcfy.cc/article/using-mixins-in-vue-js-css-tricks-3257.html
有一种很常见的情况：有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？
两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。反之，太多的props传值会很快变得混乱不堪，从而迫使维护者（即便这个人是你）在使用组件的时候必须理解一大段的上下文，拖慢写码速度。
使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解（引自 Michael Feathers ）。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大！
例子
我们有一对不同的组件，它们的作用是通过切换状态（Boolean类型）来展示或者隐藏模态框或提示框。这些提示框和模态框除了功能相似以外，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。
Modal.vue（未抽离逻辑）
<template>
<div>
<h3>Let's trigger this here modal!</h3>
<button @click="toggleShow">
<span v-if="isShowing">Hide child</span>
<span v-else>Show child</span>
</button>
<app-child v-if="isShowing" class="modal">
<button @click="toggleShow">Close</button>
</app-child>
</div>
</template>
<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";
export default {
name: "Modal",
mixins: [ toggle ],
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
},
components: {
appChild: Child
}
}
</script>
Tooltip.vue（未抽离逻辑）
<template>
<div class="tooltip-demo">
<h3 @click="toggleShow">
<span v-if="isShowing">Click Me Again</span>
<span v-else>Click Me Please</span>
</h3>
<app-child v-if="isShowing" class="tooltip">
<p>I'm a tooltip this time</p>
</app-child>
</div>
</template>
<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";
export default {
name: "Tooltip",
mixins: [ toggle ],
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
},
components: {
appChild: Child
}
}
</script>
重要：我们可以在这里提取逻辑并创建可以被重用的项：
toggle.js
export const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
Modal.vue
<template>
<div>
<h3>Let's trigger this here modal!</h3>
<button @click="toggleShow">
<span v-if="isShowing">Hide child</span>
<span v-else>Show child</span>
</button>
<app-child v-if="isShowing" class="modal">
<button @click="toggleShow">Close</button>
</app-child>
</div>
</template>
<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";
export default {
name: "Modal",
mixins: [ toggle ],
components: {
appChild: Child
}
}
</script>
Tooltip.vue
<template>
<div class="tooltip-demo">
<h3 @click="toggleShow">
<span v-if="isShowing">Click Me Again</span>
<span v-else>Click Me Please</span>
</h3>
<app-child v-if="isShowing" class="tooltip">
<p>I'm a tooltip this time</p>
</app-child>
</div>
</template>
<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";
export default {
name: "Tooltip",
mixins: [ toggle ],
components: {
appChild: Child
}
}
</script>
