如何将Vue插槽类型定义为纯字符串而非组件？

在Vue中，要实现字符串类型的插槽并同时在模板和脚本中使用，可通过默认插槽结合类型定义、useSlots() API来实现，具体步骤如下：

1. 子组件定义与使用 #

在子组件（如SlotsButton.vue）中，通过defineSlots指定默认插槽的类型为字符串，再用useSlots()在脚本中提取字符串内容：

<script setup lang="ts">
import { useSlots } from 'vue';

// 定义默认插槽为字符串返回类型
defineSlots<{
  default: () => string;
}>();

// 脚本中提取插槽字符串
const slots = useSlots();
// 处理VNode结构，提取字符串内容
const slotString = slots.default?.()?.[0]?.children ?? '';
// 脚本中使用该字符串
console.log('插槽字符串内容:', slotString);
</script>

<template>
  <button class="custom-btn">
    <!-- 模板中直接渲染插槽内容 -->
    <slot />
  </button>
</template>

2. 父组件传递字符串插槽 #

父组件直接将字符串作为默认插槽内容传入即可：

<script setup lang="ts">
import SlotsButton from './SlotsButton.vue';
</script>

<template>
  <SlotsButton>提交表单</SlotsButton>
</template>

关键细节 #

• defineSlots的类型定义里，将默认插槽的返回值设为string，可实现TypeScript类型校验；
• 由于插槽返回的是VNode数组，脚本中需要通过[0]?.children来提取字符串内容，若需更强类型安全，可添加类型守卫判断；
• 这种方式既满足了模板渲染需求，也能在脚本中直接使用插槽的字符串值。

内容的提问来源于stack exchange，提问作者Samuel M. Bednarz