--- theme: smartblue highlight: atom-one-dark --- ## 参考视频： * [《组件二次封装时不一样的插槽传递方式》 B站视频 - 远方os](https://www.bilibili.com/video/BV1Kz421e7K1) * [《组件二次封装-终极版》 B站视频 - 远方os](https://www.bilibili.com/video/BV1soMtz4ExE) * [《h函数的使用》 B站视频 - 远方os](https://www.bilibili.com/video/BV166421Z7nU) * [《h函数的使用场景》 B站视频 - 远方os](https://www.bilibili.com/video/BV1Zm421V7rm) ## 从二次封装 el-input 开始 🧀 ### 要解决的问题 1. props 如何穿透出去？ 2. slots 如何穿透出去？ 3. 组件的方法如何暴露出去？ 4. 如何让 ts 类型完备？ ### 处理 props #### 传递 \$attrs 为了保证组件原有**属性**和事件能被正常传递，我们可以使用 `mergeProps` 合并 \$attrs 和重写默认属性或新增 `props` 对象，绑定到原有组件: ```html ``` 1. `$attrs` 包含所有传入的 props 和 emit 事件； 2. 直接使用 `$attrs` 是没有 TS 类型提示的，所以我们要声明一个 `props`，至于 props 类型一般组件库都会导出。

▶️ ExtractPublicPropTypes 类型是什么作用？（点击展开）

其实，在上面的代码中，对于 props 的 TS 类型定义，一开始其实我使用的是 Partial<InputProps> ，把所有属性都变成可选，这样父组件使用时类型提示才不会报错，但是这样并不严谨，如果组件里有 props 属性是必填的，那可能不会有完备的类型提示。

对于 TypeScript 如果需要获取 Props 的类型，那就需要用到 Vue 的一个辅助类型ExtractPropTypes，而在 element-plus 源码中，大部分组件的 props 是用 ExtractPropTypes<typeof inputProps> 抽离的（源码链接 🔗）。

这里是我们属于二次封装组件，所以我们是外部引用（父组件），对于外部引用，我们就使用 ExtractPublicPropTypes。

参考链接 🔗

『精』Vue 组件如何模块化抽离Props （强烈推荐阅读）
Vue 官方文档 - TypeScript 工具类型 - ExtractPublicPropTypes<T>

#### 覆盖默认值我们可以使用 `withDefaults` 给 props 设置默认值，从而达到覆盖原组件默认值的效果 ```html ``` ### 处理 slots #### 常规版本我们以 element-plus [Input 输入框](https://element-plus.org/zh-CN/component/input.html) 组件为例，为了向子组件传递插槽，常规的做法 , 遍历 `$slots`来实现，不论是封装什么组件都可以无脑使用 `v-for v-for="(_, name) in $slots"`，即使组件插槽相互有逻辑也不会被影响。 ```html ``` `#[name]="slotProps"` 等同于 `v-slot:[name]="slotProps"` 。 **关于遍历 \$slot 写法问题** `$slots` 是个Proxy 对象，下面的写法均可: ```html v-for="(_, name) in $slots" v-for="(_, name) of $slots" v-for="(_, name) Object.keys($slots)" ``` 示例：在父组件使用，并传递 `prepend`、`append` 插槽： ```html ``` #### 使用 h 函数（花活版🌸） ```html ``` #### 使用 Vue 3.3+ 新增加辅助函数（花活版 🌸 ）在 Vue 中，我们可以在模板中直接通过 `$slots` 和 `$attrs` 来访问它们、在 Vue 3.4 版本之后，可以分别用 `useSlots` 和 `useAttrs` 两个辅助函数： ```html ```

▶️ component 组件为什么可以传入 h 函数？（点击展开）

h 函数用于创建虚拟 DMO 节点（vnode），is 属性接收到一个函数时，也就是h(ElInput, $attrs, $slots) ，会立即执行并返回一个 VNode，这个 VNode 描述了如何渲染 ElInput 组件。

### 处理 ref **问题：封装时怎么如何导出原组件实例方法？** 在二次封装子组件时，为了让父组件能够获取子组件的 ref，并能够调用一些原有的方法，我们还需要将子组件的方法暴露出去。对于这个需求，网上方法五花八门，但是在 Vue3 的 setup 模板中，我个人认为，**其实并没有特别优雅的方式**。 #### 1. 向父组件暴露 ref 函数思路：创建一个 `getRef` 的函数，把 `ref` 暴露出去, 父组件调用 `getRef` 方法后在执行子组件方法的调用： ```html ``` #### 2. 使用 Proxy 代理另一个思路，我们可以使用 `Proxy` 代理暴露出去的方法： ```html ``` * [new Proxy().has | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/has) #### 3. 使用 vm.exposed ```html ``` **Why ？** 我们添加一个 defineExpose 导出 `{ a: 1, b: 2 }`，然后打印 `vm.exposed` 和 changeRef 方法中返回的 `value` ： ```html ``` 我们看看控制台打印是什么 ![iShot\_2025-06-15\_02.31.52.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/417e619380ad47ae9dea2e9771a26e7a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zmz5L2P5rCU:q75.awebp?rk3s=f64ab15b&x-expires=1758679842&x-signature=TAHU%2BPeD4Prl8HKRVMjSB6aXNZE%3D) * 在子组件的 ref 传递一个函数 `changeRef` ，在这个函数中，可以拿到原先组件（el-input）的对外暴露的对象(方法)； * `getCurrentInstance` 获取的是当前组件的实例， `vm.exposed` 拿到的是 defineExpose 导出的 `{ a: 1, b: 2 }` 也就是说！`vm.exposed` 其实就是当前组件 `defineExpose({})` 对外抛出的对象，所以我们只要在 `changeRef` 函数中，设置 `vm.exposed = inputInstance` ，就可以再次把 el-input 对外暴露的方法暴露给父组件。推荐阅读：[巧妙使用 Vue.extend 继承组件实现 el-table 双击可编辑｜知乎 ](https://zhuanlan.zhihu.com/p/528017250)，回顾一下 Vue 2 中实例的高可玩性。 ### 处理 Typescript 类型 #### 1. 完善 props 类型提示 ```ts import type { InputProps as ElInputProps } from 'element-plus' const props = withDefaults(defineProps(), {}) ``` #### 2. 完善 \$slots 类型提示 ```ts import { ElInput } from 'element-plus' type InputSlots = InstanceType['$slots'] defineSlots() ``` #### 3. 完善 \$expose 类型提示这里的 `$expose` 指的是组件实例对外暴露的方法，如：Input 组件的 emit 事件（@foucs、@blur）等。 ```ts import type { InputInstance as ElInputInstance } from 'element-plus' defineExpose() ``` ### 终极版本（TS 类型完备） #### 基础版使用 proxy 暴露方法 : ```html ``` #### h 函数版 ```html ``` 使用示例： ```html ``` ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ca6620201cc842d8b6968cdf8a617961~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zmz5L2P5rCU:q75.awebp?rk3s=f64ab15b&x-expires=1758679842&x-signature=coV5BkOx1SfRIHbOd6V0xiOQ7Bk%3D) ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7c51c6386a9f472d812e921374c601f3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zmz5L2P5rCU:q75.awebp?rk3s=f64ab15b&x-expires=1758679842&x-signature=5mG95DsvZ6AI4kBxMomLUSFQzWk%3D) ![](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/424fc46639da47c9a28d6d76c79abfcf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zmz5L2P5rCU:q75.awebp?rk3s=f64ab15b&x-expires=1758679842&x-signature=Ix3UzwRQcAGa31f9FnWHU4CPnO0%3D)

👨 父组件

👨 父组件