vue template 复用_Vue.js 组件复用和扩展之道

软件编程有一个重要的原则是 D.R.Y（Don't Repeat Yourself），讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？

Vue 提供了不少 API 和模式来支持组件复用和扩展，你可以根据自己的目的和偏好来选择。

本文介绍几种比较常见的方法和模式，希望对你有所帮助。

扩展组件是否必要

扩展往往通过继承基础组件来达到功能复用的目的。要知道，所有的组件扩展方法都会增加复杂性和额外代码，有时候还会增加性能消耗。经验告诉我们，组合模式优于继承。

因此，在决定扩展组件之前，最好先看看有没有其他更简单的设计模式能完成目标。

下面几种模式通常足够替代扩展组件了：

• props 配合模板逻辑
• slot 插槽
• JavaScript 工具函数

props 配合模板逻辑

最简单的方法是通过props结合模板条件渲染，来实现组件的多功能。

比如通过 type 属性：MyVersatileComponent.vue

<template>
  <div class="wrapper">
    <div v-if="type === 'a'">...</div>
    <div v-else-if="type === 'b'">...</div>
    <!--etc etc-->
  </div>
</template>
<script>
export default {
  props: { type: String },
  ...
}
</script>

使用组件的时候传不同的type值就能实现不同的结果。

// *ParentComponent.vue*
<template>
  <MyVersatileComponent type="a" />
  <MyVersatileComponent type="b" />
</template>

如果出现下面两种情况，就说明这种模式不适用了，或者用法不对：

1. 组件组合模式把状态和逻辑分解成原子部分，从而让应用具备可扩展性。如果组件内存在大量条件判断，可读性和可维护性就会变差。
2. props 和模板逻辑的本意是让组件动态化，但是也存在运行时资源消耗。如果你利用这种机制在运行时解决代码组合问题，那是一种反模式。

slot（插槽）

另一种可避免组件扩展的方式是利用 slots（插槽），就是让父组件在子组件内设置自定义内容。

// *MyVersatileComponent.vue*
<template>
  <div class="wrapper">
    <h3>Common markup</div>
    <slot />
  </div>
</template>

// *ParentComponent.vue*
<template>
  <MyVersatileComponent>
    <h4>Inserting into the slot</h4>
  </MyVersatileComponent>
</template>

渲染结果：