Vue defineSlots 怎么给具名插槽声明类型化 props

在 中调用 defineSlots()：类型属性名写具名插槽名，属性值写函数签名，第一个参数写插槽 props 对象。子组件仍要通过 绑定实际数据，父组件再用对应的 #插槽名 解构接收。声明提供静态类型信息，不会自动生成运行时数据校验。

官方地址：https://vuejs.org/api/sfc-script-setup.html

插槽从“可用”走向“可维护”，变化在哪里？

以列表组件为例，调用方知道可以自定义每一行，却不一定知道行参数叫 entry 还是 item，序号是数字还是字符串。把这些约定写进组件类型，比只在示例页面里展示一次更方便维护。这里讨论的是明确组件契约的采用方式，没有搜索量或市场占有率数据，也不把一种宏的存在解释为所有团队都必须迁移。

Vue 官方将 defineSlots 标为 3.3+ 可用。现有 TypeScript 单文件组件可以在具名插槽上逐步补类型；纯 JavaScript 项目则需要先考虑是否愿意维护 TypeScript 配置。我的取舍建议是先覆盖被多个页面复用、参数容易混淆的插槽，而不是为了形式统一一次改完全部组件。

子组件如何同时声明 row 和 summary？

下面的 RecordList.vue 暴露两个插槽：row 每行接收 entry、index；summary 接收总数 total。注意组件输入 items 与插槽输出是两个接口，前者属于 defineProps，后者属于 defineSlots。

defineSlots 只接受类型参数，不传运行时配置对象。这里直接在类型字面量中写出两个插槽名。函数返回类型沿用 any；官方目前不利用该返回类型检查插槽内容，不能把它写成某种节点类型后，就声称父模板的所有输出都因此获得验证。

类型里出现 entry 不会让数据自己传到父组件。真正的传递约定还要对应模板里的 :entry="entry"。如果后来把模板绑定改成 item，却保留类型里的 entry，契约与实现就产生分歧。维护时应把类型签名和插槽出口视为同一个接口的两部分。

父模板怎样得到类型化的插槽参数？

把组件放进已有 Vue TypeScript 项目的 App.vue 中，父模板按名字提供内容。row 中的 index 可用于序号，entry.done 可用于状态展示；summary 的 total 可作为数值使用。

在正确配置的 Vue 类型工具中，调用方可利用声明查看字段与发现不匹配使用。本文代码未执行，没有展示真实编辑器诊断，也不承诺某个工具版本一定给出完全相同的报错文案。读代码时最重要的是对应关系：row 对应 row，summary 对应 summary；解构字段对应函数第一个参数对象。

收益主要落在哪些角色，哪些风险仍然存在？

Vite 开发服务及打包本身以转译为主，不能把“页面能打开”当作 SFC 类型检查通过。Vue 官方建议使用配套编辑器支持，并通过 vue-tsc 处理单文件组件的类型检查。项目可以将这项工作放入已有构建安排；本文只说明使用条件，不运行示例或类型检查。

另外，类型契约不等于调用方一定提供插槽。本例给 row 与 summary 都写了回退内容，缺少自定义内容时仍有基础展示。不要把某个静态声明直接当成运行时必填校验。若脚本确实需要访问插槽对象，defineSlots 的返回值可用；本例没有该需求，因此不建立一个闲置变量。

采用路径应如何安排？

先选一个边界清楚的组件，例如这里的列表。写清每个插槽的用途，固定字段命名，再把父模板的解构和显示方式同步整理。随后观察团队是否减少了“这个字段到底是什么”的沟通，以及改字段时能否找到需要调整的调用点。这些是可观察的采用指标，不是已经测得的收益数字。

如果组件只在一处使用，参数又非常简单，补类型的收益可能有限；如果一个插槽输出十几个相互依赖的字段，先梳理接口往往比继续增加类型注解更有帮助。本例有意把行信息和汇总信息拆开，避免让每个调用方都处理不相关字段。

几个常见问题

需要从 vue 导入 defineSlots 吗？在本文的 script setup 宏用法中直接使用，不把它当作普通运行时函数手动调用。若项目提示无法识别，先核对 Vue、SFC 编译与类型工具的配置和版本。

具名插槽 props 能写成字符串类型吗？字段可以是字符串，但插槽函数的第一个参数仍应描述完整对象。例如 entry.label 是字符串，不能因此把 row 整体简化成只接收一个 label 字符串。

defineSlots 会创建插槽内容吗？不会。内容来自父模板或子组件写出的回退内容，类型声明不承担渲染实现。

能据此验证接口返回数据吗？不能。来自接口的数据是否符合 Entry，需要在相应数据边界另行处理；把它放进类型声明不会在浏览器里自动产生校验逻辑。

参考：Vue defineSlots 官方说明；Vue TypeScript 工具链概览。