[译] 复用 Vue 组件的 6 层手段

时间 2020-06-29

标签 vue 组件手段繁體版

原文原文链接

原文：michaelnthiessen.com/6-levels-of…html

在编写代码的时候，谁都想“少干活、多办事”。以组件而言，咱们但愿它能被不止一次地复用。前端

一些组件仅需基本的复用性。vue

另外一些则须要更复杂的技术以充分利用。svg

我认为复用性有 6 中不一样的层级，这里大致上来看一下：组件化

1. 模版化

不一样于将代码随处复制/粘贴的是，借助模版化能够将其包裹在组件内部。测试

当复用组件 -- 而不是直接拷贝代码时，给咱们带来了两个好处：动画

将来的改动变得简单的多，由于只须要在一处进行
无需再记住相似代码被拷贝到的哪几个甚至上百个地方了

这简直太基础了，也是谈及复用性时最常被提及的。spa

更高一个层级的就有意思些了：3d

2. 配置

对于某些组件，使用起来是须要变化的。code

一个 Button 组件会有个基本的样子，或许也要支持带个图标。与其为每一个版本都从新建立一整个新组件，不如使用属性切换其类型。

添加这些属性一般不会对组件改动太多，但却带来了组件使用的更多灵活性。

注意：这跟使用属性影响状态或数据是不一样的，好比一个 loading prop 或 disabled prop.

3. 适配性

配置的最大问题在于缺少远见。要预见并支持将来的需求，就得向组件中加入不少属性。

但若是让组件变得“可适配”，在不用改变组件的前提下，就能让其支持咱们甚至不曾设想到的场景。

实现的方法是用一个 slot，从父组件中传入一块模版置标。

好比，与直接在 Button 组件上使用一个 text 属性不一样的是，咱们可使用 default slot：

<!-- Button.vue -->

<template>
  <button class="btn btn--default" @click="$emit('click')" >
    <slot />
  </button>
</template>
复制代码

这样一来，就不受制于传递一个 string、number 仍是别的什么了。

若是要增长一个 loading 旋转动画，又不想改动 Button 组件，这样作就行了：

<template>
  <Button>
    <img v-if="loading" src="spinner.svg" />
    摁我
  </Button>
</template>
复制代码

4. 反转

与向子组件中传入一整块模版置标又有所不一样的是，咱们还能传入一组指令，以决定其如何渲染。

打个比方，这就像本身烹饪和叫外卖的对比。当你按照菜谱本身动手时，虽然要费些事，但却尽在掌握 -- 你能够本身掌控“少量味精”是多少，甚至直接扔掉菜谱本身发挥均可以。

在 Vue 中，使用 scoped slot (做用域插槽) 就能够达到目的，为组件增长更多的灵活性了。

（译注 - 官网上的例子）：

<!-- 子组件 CurrentUser -->
<span>
  <slot v-bind:user="user">
    {{ user.lastName }} <!--默认值-->
  </slot>
</span>

<!-- 父组件 -->
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.age < 10
        ? slotProps.user.lastName
        : `Mr. ${slotProps.user.firstName}` }}
  </template>
</current-user>
复制代码

5. 扩展

使用 Vue 中的 named slots (具名组件) 能够在组件中添加一个或多个扩展点。再结合上述的适配和反转，就具有了最大化组件复用性的必要技术。下一步就是在组件中贯彻这些技术，以更简单地扩展其行为。

下例中，一个 Modal 组件中分别有 header、default 和 footer 几个 slots：

<template>
  <div class="modal">
    <slot name="header">
      <h2>{{ title }}</h2>
    </slot>

    <!-- Default slot for main content -->
    <slot />

    <slot name="footer">
      <Button @click="closeModal">
        Close
      </Button>
    </slot>
  </div>
</template>
复制代码

例子至关简单，但咱们已经有了多种扩展这个组件的选项了：

只是覆写 default slot 来显示内容
显示默认内容，并增添 header slot 部分
显示默认内容，并增添 footer slot 以显示几个按钮
显示全部 slots 的内容

6. 嵌套

若是咱们将“扩展点”逐层传递，就能达到最终目的。这乍听起来有点繁琐，但确实有用，特别是在大型应用的环境中。

从一个完成至关普通功能的基础组件 A 开始；下一个组件 B 比 A 稍微不那么普通一些，并在不多的方面扩展 A。以后周而复始，直到你拥有了最终能真正工做的组件。

相似于经典的 OOP 例子，咱们能够从一个至关通用的 动物 组件扩展到更特别一些的 哺乳动物，接下来是 狗 并最终获得 贵妇犬。

要是咱们的目的就只是 贵妇犬，那这一切确实是费了瞎劲；但在大型应用中，咱们要从一样但基础想法上扩展出各类各样的结果 -- 好比从 狗 中分化出 金毛 和 京巴，或从 哺乳动物 中获得 猫科动物 并实现 老虎 和 狮子。

总结

本文列出了复用 Vue 组件的 6 层手段。这说不上是所有，或许还有其它手段，但已经足够实用了。

✨ 更多“组件化”的文章 ✨

--End--

查看更多前端好文
请搜索 fewelife 关注公众号

转载请注明出处