高级 Vue 组件模式 (3)

iKcamp 发布于2019-08-23 12:26 / 3495人阅读

摘要：在中，我们是否也有一些手段或特性来提高组件的复用程度和灵活性呢答案当然是有的，那就是。成果通过实现，我们成功将注入的逻辑抽离了出来，这样每次需要共享组件的状态和方法时，混入该即可。

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

GPU云服务器云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98523.html

高级 Vue 组件模式 (1)

摘要：写在前头去年，曾经阅读过一系列关于高级组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级组件模式的文章，碰巧最近接手了一个公司项目，前端这块的技术栈是。同时这个组件还拥有一个属性，用来初始化的状态值。写在前头去年，曾经阅读过一系列关于高级 react 组件模式的文章，今年上半年，又抽空陆陆续续地翻译了一系列关于高级 angular 组件模式的文章，碰巧最近接手了一个公...

lanffy 2019-08-23 12:26 评论0 收藏0
高级 Vue 组件模式 (2)

摘要：编写复合组件目标我们需要实现的需求是能够使使用者通过组件动态地改变包含在它内部的内容。成果通过复合组件的方式，我们将组件划分为了三个更小的职责更加单一的子组件。 02 编写复合组件目标我们需要实现的需求是能够使使用者通过组件动态地改变包含在它内部的内容。熟悉 vue 的童鞋可能马上会想到不同的解决方案，比如使用 slot 并配合 v-if，我们这里采用另外一种方法，利用 vu...

Galence 2019-08-23 12:26 评论0 收藏0
高级 Vue 组件模式 (5)

摘要：你可以下面的链接来看看这个组件的实现代码以及演示在线演示总结当期望获得子元素或者子组件的引用时，切记使用和来解决问题。 05 使用 $refs 访问子组件引用目标在之前的文章中，详细阐述了子组件获取父组件所提供属性及方法的一些解决方案，如果我们想在父组件之中访问子组件的一些方法和属性怎么办呢？设想以下一个场景：当前的 custom-button 组件中，有一个 input 元素...

woshicixide 2019-08-23 12:27 评论0 收藏0
高级 Vue 组件模式 (9)

摘要：在中，这种类型的组件也可以叫做函数式组件。这种组件和普通组件相比的优势主要在于，它是无状态的，这意味着它的可测试性和可读性更好，同时一些情况下，渲染开销也更小。 09 使用 Functional 组件目标到此为止，我们的 toggle 组件已经足够强大以及好用了，因此这篇文章不会再为它增加新的特性。如果你是从第一篇文章一直读到这里的读者，你一定会发现，整篇文章中，我几乎没有对 to...

李义 2019-08-23 12:36 评论0 收藏0
高级 Vue 组件模式 (4)

摘要：使用替换目标在第三篇文章中，我们使用来抽离了注入依赖项的公共逻辑。成果通过作用域插槽，我们有效地避免了第三方组件由于混入而可能造成的命名冲突以及隐式依赖等问题。 04 使用 slot 替换 mixin 目标在第三篇文章中，我们使用 mixin 来抽离了注入 toggle 依赖项的公共逻辑。在 react 中，类似的需求是通过 HOC 的方式来解决的，但是仔细想想的话，react 在早...

LancerComet 2019-08-23 12:27 评论0 收藏0