vue3 一次二次封装element-plus组件引发的思考
前言
在开发 Vue 项目中我们一般使用第三方 UI 组件库进行开发,如 Element-Plus、Element-ui、Ant-design等
, 但是这些组件库提供的组件并不一定都能满足我们的日常开发需求,有时候我们需要实现的效果是直接使用组件库无法实现的,那么这时我们就可以通过对组件库的组件进行二次封装,以此来满足我们不同场景下的需求。
对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口,除了我们需要封装的功能外,我们不应该改变原有组件的接口,即保持原有组件提供的接口(属性、方法、事件、插槽)不变。
保持原有组件的接口
继承第三方组件的 Attributes 属性
如果我们往 CustomInput 组件(我们自定义的input组件)传入一些属性,并且想要将这些属性传给 el-input,最简单的方式就是在组件中一个个的去定义 props
,然后再传给 el-input,但是这种方法非常麻烦,毕竟 el-input
的