前言
在开发Vue项目我们一般使用第三方UI组件库进行开发，如element-plus, @arco-design/web-Vue, naive-ui等, 但是这些组件提供的接口并不一定满足我们的需求，这时我们可以通过对组件库组件的二次封装，来满足我们特殊的需求。
对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口，除了我们需要封装的功能外，我们不应该改变原有组件的接口，即保持原有组件提供的接口如props,events,slots等不变。
为了实现这一原则我们就需要将新组件的接口与旧组件的接口一一对应, 当然我们可以通过在新组件中一一声明对应的接口来实现（或者只实现我们目前需要用到的接口）但这种办法虽然简单但看起来却极其很繁琐, 有没有一种方法可以实现props,events,slots的自动透传呢？
透传 Attribute
我们可以使用一个没有参数的 v-bind来实现props,events的透传， 它会将一个对象的所有属性都作为 attribute 应用到目标元素或组件上, 这在官方文档中有着详细介绍。
其中$attrs包含组件可以透传属性的对象, 透传属性包括props,events, class,style,id等。(不包含接收组件显式声明的 props、emits以及slots )
如下,是一个封装el-input的默认可清空的的组件，由于我们已经在defineProps声明过clearable, 所以此时我们需要显性传递clearable属性
{{ label }}
如果我们不希望透传某些属性比如class, 我们可以通过useAttrs来实现
{{ label }}
上述封装的组件还有个缺点, 就是我们将无法使用el-input本身提供的slot,下面我们就来实现一个可以透传 slot的组件
透传 slot
slot可以通过下面这种方式透传的
普通slot
如果透传的slot比较少，我们可以通过在封装组件内部定义并使用插槽
动态插槽名
如果需要透传的slot不固定或者较多，我们可以通过动态插槽名称透传
如下是一个透传的slot的el-input组件
{{ label }}
作用域插槽
如果需要封装组件使用了作用域插槽，我们可以通过
封装组件存在的问题
组件实例属性和方法的调用
封装后的组件我们无法按照之前的情况调用组件实例中的属性和方法，比如BaseButton有focus方法,在封装之前我们可以通过下面这种方式调用
// 调用BaseButton的组件父组件 //const button = ref(); button.value.focus()
对于封装后的组件，由于此时button指向我们的MyButton,并不指向BaseButton的实例，所以我们需要在包装的组件中声明并暴露BaseButton事例
//我们封装的组件 // MyButton.Vue //const button = ref();
注意如果我们使用