你想要Vue3 <script setup> 语法下，插槽（Slot）的完整用法，包括默认插槽、具名插槽、作用域插槽，我给你最清晰、直接能用的示例。
插槽的作用：让父组件可以向子组件指定位置插入 HTML 结构，实现组件内容定制化。
一、核心概念
- 子组件：定义插槽位置（挖坑）
- 父组件：填写插槽内容（填坑）
- 三种插槽：
- 默认插槽（一个坑）
- 具名插槽（多个坑，起名字区分）
- 作用域插槽（子组件把数据传给父组件用）
二、完整代码示例
1. 默认插槽（最简单）
子组件 Child.vue
<template>
<div class="child">
<h3>子组件</h3>
<!-- 定义插槽：父组件内容会显示在这里 -->
<slot></slot>
</div>
</template>
父组件 Parent.vue
<template>
<Child>
<!-- 这里的内容会插入到子组件的 slot 中 -->
<p>我是父组件填的默认内容 ✅</p>
</Child>
</template>
<script setup>
import Child from './Child.vue'
</script>
2. 具名插槽（多个插槽，起名字）
子组件有多个坑，父组件要对号入座。
子组件 Child.vue
<template>
<div>
<!-- 头部插槽 -->
<slot name="header"></slot>
<!-- 默认插槽 -->
<slot></slot>
<!-- 底部插槽 -->
<slot name="footer"></slot>
</div>
</template>
父组件 Parent.vue
使用 v-slot:名字 或简写 #名字
<template>
<Child>
<!-- 头部插槽 -->
<template #header>
<h4>我是头部内容</h4>
</template>
<!-- 默认插槽 -->
<p>我是中间默认内容</p>
<!-- 底部插槽 -->
<template #footer>
<p>我是底部内容</p>
</template>
</Child>
</template>
3. 作用域插槽（子传数据给插槽用）
子组件把自己的数据，传给父组件的插槽内容使用，这是最常用的高级用法。
子组件 Child.vue
通过 slot 绑定数据：
<template>
<div>
<!-- 子组件把数据传给插槽 -->
<slot
name="info"
:user="userData"
:msg="hello"
></slot>
</div>
</template>
<script setup>
import { ref } from 'vue'
// 子组件内部数据
const userData = ref({ name: '李四', age: 22 })
const hello = ref('我是子组件的消息')
</script>
父组件 Parent.vue
接收子组件传过来的数据：
<template>
<Child>
<!-- 接收子组件的插槽数据 -->
<template #info="{ user, msg }">
<p>姓名：{{ user.name }}</p>
<p>年龄：{{ user.age }}</p>
<p>消息：{{ msg }}</p>
</template>
</Child>
</template>
三、插槽简写语法
v-slot:header→ 简写#header- 默认插槽可以简写：
#default
四、必备知识点
- 插槽是组件内容分发的核心方案
- 具名插槽必须用
<template>包裹 - 作用域插槽 = 子组件给父组件传数据 + 渲染内容
- 可以给插槽设置默认内容（子组件没填时显示）：
<slot>我是默认占位内容</slot>
总结
- 默认插槽：一个坑，直接填内容
- 具名插槽：多个坑，用
name区分，#名字使用 - 作用域插槽：子传数据给插槽，
#名字="{ data }"接收
