Vue插槽：如何为可用插槽名称与作用域插槽提供TypeScript类型？

对于有React背景的开发者来说，Vue的插槽机制确实和React的children/组件props模式不同。要在App.vue中知晓第三方Card组件的可用插槽及作用域插槽属性，你可以通过以下几种方式：

1. 查看组件的TypeScript类型定义 #

如果第三方库支持TypeScript，会提供对应的.d.ts类型文件。你可以找到Card.vue关联的类型定义，里面会明确声明插槽的名称和作用域插槽的props结构。示例类型定义如下：

import type { DefineComponent } from 'vue';

interface CardSlotProps {
  slot2: { title: string };
}

declare const Card: DefineComponent<
  {}, // 组件props
  {}, // 组件状态
  {}, // 组件emit
  CardSlotProps // 插槽定义
>;

export default Card;

在编写App.vue的模板时，TypeScript会自动基于这些类型提供代码补全和类型校验。

2. 查阅组件官方文档 #

第三方组件库通常会在文档中详细列出所有插槽信息：包括插槽名称、用途，以及作用域插槽传递的属性名称和类型。这是最高效的方式，能直接获取权威的使用说明。

3. 直接查看组件源码 #

如果没有文档或类型定义，直接打开Card.vue的源码看<template>部分：

• 带有name属性的<slot>标签就是具名插槽，比如<slot name="slot1">对应插槽slot1
• 作用域插槽会在<slot>上绑定属性，比如<slot name="slot2" title="I am slot 2">，这里的title就是该插槽传递给使用者的属性，类型可以从绑定值（这里是字符串）推断出来。

4. 使用Vue DevTools调试 #

在浏览器中打开Vue DevTools，选中Card组件后切换到「Slots」面板，就能看到组件所有可用插槽，包括已使用和未使用的，同时可以查看作用域插槽传递的props的具体值和类型。

内容的提问来源于stack exchange，提问作者floroz