高级 Vue 组件模式 3

03 使用 mixin 来加强 Vue 组件

目标

以前一篇文章中，咱们虽然将 toggle 组件划分为了 toggle-button、toggle-on 和 toggle-off 三个子组件，且一切运行良好，可是这里面实际上是存在一些问题的：

• toggle 组件的内部状态和方法只能和这三个子组件共享，咱们指望第三方的组件也能够共享这些状态和方法
• inject 的注入逻辑咱们重复编写了三次，若是能够的话，咱们更但愿只声明一次（DRY原则）
• inject 的注入逻辑当前为硬编码，某些状况下，咱们可能指望进行动态地配置

若是熟悉 react 的读者这里可能立刻就会想到 HOC（高阶组件） 的概念，并且这也是 react 中一个很常见的模式，该模式可以提升 react 组件的复用程度和灵活性。在 vue 中，咱们是否也有一些手段或特性来提升组件的复用程度和灵活性呢？答案固然是有的，那就是 mixin。

实现

关于 mixin 自己的知识，这里就不作过多赘述了，不熟悉的读者能够去官方文档了解。咱们经过声明一个叫做 toggleMixin 的 mixin 来抽离公共的注入逻辑，以下：

export const withToggleMixin = {
  inject: {
    toggleComp: "toggleComp"
  }
};
复制代码

以后，每当须要注入 toggle 组件提供的依赖项时，就混入当前 mixin，以下:

mixins: [withToggleMixin]
复制代码

若是关于注入的逻辑，咱们增长一些灵活性，好比指望自由地声明注入依赖项的 key 时，咱们能够借由 HOC 的概念，声明一个高阶 mixin（能够简称 HOM ?? 皮一下，很开心），以下：

export function withToggle(parentCompName = "toggleComp") {
  return {
    inject: {
      [parentCompName]: "toggleComp"
    }
  };
}
复制代码

这个 HOC mixin 能够按以下的方式使用：

mixins: [withToggle("toggle")]
复制代码

这样在当前的组件中，调用 toggle 组件相关状态和方法时，就再也不是 this.toggleComp，而是 this.toggle。

成果

经过实现 toggleMixin，咱们成功将注入的逻辑抽离了出来，这样每次须要共享 toggle 组件的状态和方法时，混入该 mixin 便可。这样就解决了第三方组件没法共享其状态和方法的问题，在在线实例代码中，我实现了两个第三方组件，分别是 custom-button 和 custom-status-indicator，前者是自定义开关，使用 withToggleMixin 来混入注入逻辑，后者是自定义的状态指示器，使用 withToggle 高阶函数来混入注入逻辑。

你能够下面的连接来看看这个组件的实现代码以及演示：

• sandbox: 在线演示
• github: part-3

总结

mixin 做为一种分发 Vue 组件中可复用功能的很是灵活的方式，能够在不少场景下大展身手，尤为在一些处理公共逻辑的组件，好比通知、表单错误提示等，使用这种模式尤为有用。

目录

github gist