高级 Vue 组件模式 3

栏目: JavaScript · 发布时间: 7年前

内容简介：之前一篇文章中，我们虽然将如果熟悉 react 的读者这里可能马上就会想到 HOC（高阶组件）的概念，而且这也是 react 中一个很常见的模式，该模式能够提高 react 组件的复用程度和灵活性。在 vue 中，我们是否也有一些手段或特性来提高组件的复用程度和灵活性呢？答案当然是有的，那就是 mixin。关于 mixin 本身的知识，这里就不做过多赘述了，不熟悉的读者可以去官方文档了解。我们通过声明一个叫作 toggleMixin 的 mixin 来抽离公共的注入逻辑，如下：

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

toggle

如果熟悉 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 高阶函数来混入注入逻辑。

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