我们所有人都希望编写更少的代码，但要做更多的事情。

 

为了实现这一点，我们构建了组件，以便可以多次重用它们。

 

一些组件只需要基本的可重用性。

 

其他人则需要更复杂的技术才能充分利用它们。

 

我已经确定了6个不同级别的可重用性，但是可能还有更多我错过的地方。

 

这是有关级别的基本概述。我即将举行的课程“ 可重用组件 ”探讨了每个组件以及如何充分利用它们。

 

1.模板化

 

通过这种技术，我们将其包装在其自己的组件中，而不是到处复制+粘贴代码。

 

当我们重用该组件（而不是直接使用代码）时，它给我们带来了两个好处：

 

将来进行更改要容易得多，因为我们只需要在一个地方做 我们不必记住将代码复制到的数十个（或数百个）地方 这是最基本的，也是最经常谈论的可重用性形式。

 

但是更高的级别会变得更加有趣...

 

2.配置

 

对于某些组件，我们需要对其工作方式有所不同。

 

甲Button组件可能有一个主版本，以及一个唯一的图标版本。但是，我们没有为每个版本创建全新的组件，而是使用道具在不同类型之间进行切换。

 

添加这些道具通常不会给组件增加太多，但可以为我们提供更多使用该组件的灵活性。整洁

 

注意：这与将loadingprop 用于状态或数据（例如prop或disabledprop）不同。

 

3.适应性

 

配置的最大问题是缺乏远见。您需要预见将来的需求，并通过放置这些道具将它们构建到组件中。

 

但是，如果您使组件具有适应性，则无需更改组件即可使用从未想到的用例。

 

我们通过使用插槽将标记的一部分从父代传递到组件来实现。

 

例如，我们可以使用插槽代替text在Button组件中使用道具default：

 

<!-- Button.vue -->

 

<template>

 

  <button

 

    class="btn btn--default"

 

    @click="$emit('click')"

 

  >

 

    <slot />

 

  </button>

 

</template>

 

现在，我们不仅限于传递a string或numberin。

 

如果我们想添加loading微调器而不必修改我们的Button组件，则可以这样做：

 

<template>

 

  <Button>

 

    <img

 

      v-if="loading"

 

      src="spinner.svg"

 

    />

 

    Click Me

 

  </Button>

 

</template>

 

4.反转

 

无需将完整的标记块传递给我们的子组件，我们可以传递一组有关如何呈现的指令。

 

这就像遵循食谱而不是订购外卖。当您遵循食谱时，要做的工作要多一些，但是您可以完全掌控自己的制作方式。您可以随时进行调整，也可以完全放弃该食谱。

 

我们使用作用域插槽来为我们的组件增加更大的灵活性。

 

5.扩展

 

通过适应性和反转性，我们拥有必要的技术，可以最大限度地提高组件的可重用性。

 

下一步是将这些技术应用于整个组件，以便我们更轻松地扩展其行为。

 

我们使用命名槽在组件中添加一个或多个扩展点。仅适应性和反转本身给我们提供了扩展行为的一种选择，而拥有多个扩展点则为我们提供了许多不同的选择。

 

在这里，我们有一个Modal与组件header，default以及footer：

 

<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广告位即可添加我们的内容 添加内容但也覆盖header广告位 内容和footer添加不同按钮的插槽 内容无一不header与footer插槽的东西更多的自定义 （如果不使用插槽，我们可以添加更多default，但这在这里不太可能）

 

您不必扩展此组件的行为，也可以扩展其一部分。无论哪种方式，您都将获得很大的灵活性和大量的代码重用性。

 

6.嵌套

 

通过将这些扩展点通过一层或多层组件，我们将得出扩展的结论。

 

乍一看听起来很疯狂，但是它非常有用，尤其是在大中型应用程序中。

 

您从一个基本组件开始，该组件的功能相当普遍。下一个组件更加具体，以几种方式扩展了基础组件。然后不断，直到您拥有完成实际工作的最终组件。

 

这正是我们从非常笼统的内容Animal变为更具体的内容Mammal，然后Dog最终降落到的方式Poodle。如果我们需要的只是一个Poodle组件，那么我们在这里浪费时间，但是在大型应用程序中，我们需要在相同的基本概念上进行很多改动。

 

我们可以扩展Dog组件以获得Corgi和Beagle。或扩展Mammal组件以获得Cat组件，然后让我们添加Tiger和Lion组件。

 

这是我遇到的最先进的可重用性应用程序。我用这个技术有很多在我自己的工作。

 

结论

 

这是我遇到的6个可重用性级别。

 

我可能会错过一些，我当然不会说这是一份详尽的清单，但是它足够完整，可以使用。

 

这样的简短文章并不能使他们公平，但是我将在我即将开始的课程Reusable Components中更深入地探讨它们。