Vue3 defineSlots 怎么做类型安全的插槽？

Question

仓乃文 · Accepted Answer

useSlots() 返回的插槽没有类型提示，传入插槽的内容类型无法在编译时检查。defineSlots 可以声明每个插槽的名称和 props 类型，IDE 会提供完整的类型提示和校验。定义类型安全插槽： ```javascript const slots = defineSlots<{ header: (props: { title: string }) => any; default: (props: { item: Item; index: number }) => any; footer: () => any; }>(); ``` 模板中使用作用域插槽： ```html ``` 补充说明： - defineSlots 是编译宏，不需要从 vue 导入 - 插槽 props 的类型会同时约束子组件传参和父组件接收 - 不需要类型提示时，可以直接用标签，无需 defineSlots - Vue 3.3+ 可用，配合 TypeScript 使用效果最佳 - 返回值与 useSlots() 兼容，可以用于条件渲染插槽