![6d4576ac1bb176ea77c251d07412ed7c.png](https://i-blog.csdnimg.cn/blog_migrate/4d8d98dc7caa310457a21133b39d73e0.jpeg)
软件编程有一个重要的原则是 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>
如果出现下面两种情况,就说明这种模式不适用了,或者用法不对:
- 组件组合模式把状态和逻辑分解成原子部分,从而让应用具备可扩展性。如果组件内存在大量条件判断,可读性和可维护性就会变差。
- 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>
渲染结果: