在Vue.js中如何使用Mixins？

本文和大家分享的主要是 在Vue.js 中使用 Mixins相关内容，一起来看看吧，希望对大家 学习Vue.js 有所帮助。

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