vue3 一次二次封装element-plus组件引发的思考

 

前言

在开发 Vue 项目中我们一般使用第三方 UI 组件库进行开发，如 Element-Plus、Element-ui、Ant-design等, 但是这些组件库提供的组件并不一定都能满足我们的日常开发需求，有时候我们需要实现的效果是直接使用组件库无法实现的，那么这时我们就可以通过对组件库的组件进行二次封装，以此来满足我们不同场景下的需求。

对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口，除了我们需要封装的功能外，我们不应该改变原有组件的接口，即保持原有组件提供的接口（属性、方法、事件、插槽）不变。

 

保持原有组件的接口

 

继承第三方组件的 Attributes 属性

如果我们往 CustomInput 组件（我们自定义的input组件）传入一些属性，并且想要将这些属性传给 el-input，最简单的方式就是在组件中一个个的去定义 props，然后再传给 el-input，但是这种方法非常麻烦，毕竟 el-input 的