vue3＜script setup＞中插槽的使用

在 Vue 3 中，<script setup> 语法糖极大地简化了组件的编写方式，使得代码更加简洁。在使用 <script setup> 时，插槽（Slots）的使用方式和在常规 <script> 中类似，但可能需要稍微注意一些细节，尤其是在类型化模板编译（如果你使用 TypeScript）时。

基本使用

在 <template> 中定义插槽，然后在父组件中通过 <template v-slot:name> 或简写为 #name 来填充这些插槽。

子组件（ChildComponent.vue）:

<script setup>  
// 这里可以定义组件的逻辑，但插槽的声明主要在模板中  
</script>  
  
<template>  
  <div>  
    <header>  
      <!-- 默认插槽 -->  
      <slot></slot>  
    </header>  
    <main>  
      <!-- 具名插槽 -->  
      <slot name="content"></slot>  
    </main>  
  </div>  
</template>

父组件中使用:

<template>  
  <ChildComponent>  
    <!-- 默认插槽 -->  
    <template>  
      <p>这是默认插槽的内容</p>  
    </template>  
  
    <!-- 具名插槽 -->  
    <template #content>  
      <p>这是名为 'content' 的插槽的内容</p>  
    </template>  
  </ChildComponent>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
}  
</script>

插槽的作用域

还可以定义作用域插槽，使得子组件可以向插槽传递数据。

子组件（ChildComponent.vue）:

<script setup>  
import { ref } from 'vue';  
  
const data = ref('来自子组件的数据');  
</script>  
  
<template>  
  <div>  
    <!-- 作用域插槽 -->  
    <slot name="scoped" :userData="data"></slot>  
  </div>  
</template>

父组件中使用:

<template>  
  <ChildComponent>  
    <template #scoped="{ userData }">  
      <p>{{ userData }}</p>  
    </template>  
  </ChildComponent>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
}  
</script>

TypeScript 中的类型支持

如果在 Vue 3 中使用 TypeScript，并希望为插槽提供类型支持，可以通过定义组件的 defineExpose 和在父组件中显式声明插槽的类型来实现。然而，对于插槽内容的类型，Vue 官方并没有直接提供类型定义接口，通常需要通过类型断言或额外的类型定义来支持。

插槽 Slots | Vue.js (vuejs.org)