Vue插槽:如何提供关于可用插槽名称和作用域插槽的TypeScript类型?

Question

我在Vue Playuground创建了这个例子

让我们假设我们有一个来自库的第三方组件，Card.vue组件:

<template>
<slot name="slot1"></slot>
<slot name="slot2" title="I am slot 2">
</slot>
</template>

，这个组件是在我们的应用程序中使用的，我们利用了一个命名槽和一个作用域槽。

<script setup>
import Card from './Card.vue';
</script>
<template>
<Card>
<template #slot1>
<h1>
I am slot 1
</h1>
</template>  
<template #slot2="slotProps">
<h1>
{{slotProps.title}}
</h1>
</template>  
</Card>
</template>

然而，来自React背景，你没有slots，而是childrenprop和Component props，我努力理解的是如何向消费者提供类型信息。

我如何知道，在我的App.vue文件中，哪些插槽名称是可用的，以及哪些范围的插槽属性?

Answer 1

使用Vscode并安装Volar插件可能会对您有所帮助。下面是它的截图。

摘自Vue关于tools的文档:

推荐的IDE设置是VSCode + Vue语言特性(Volar)扩展。该扩展为模板表达式和组件道具提供语法高亮显示、TypeScript支持和智能感知。

IDE对Vuejs.org的支持