slot使用场景有哪些？

一、基础场景：封装高度可复用的“通用组件”
这是插槽最基础、使用最频繁的用途。当组件的外壳（样式/布局）固定，但内部内容需要根据页面动态变化时使用。
1、弹窗/对话框组件：封装一个 BaseDialog，外壳（遮罩、标题栏、确认/取消按钮）固定，把中间的内容区用 挖空。父组件往里塞“登录表单”、“图片预览”或“删除确认文字”。
2、卡片/容器组件：封装一个 InfoCard，左边图标和右边标题固定，用插槽让父组件塞不同的列表项或图表。
3、按钮组：封装 IconButton，把图标位置留成插槽，父组件可以放 FontAwesome 图标，也可以放 Element Plus 图标，甚至纯文字。

二、进阶场景：精确控制布局的“具名插槽”
当一个组件需要多个不同位置的“坑”时，匿名插槽不够用了，需要用 name 属性区分。
1、复杂页面布局：封装一个 PageLayout，分别挖出 header、sidebar、main、footer 四个具名插槽。不同页面可以自由决定头部放什么、侧栏放什么。
2、表格/列表组件的定制列：封装 CustomTable，用具名插槽分别接管“表头”、“操作列”、“状态列”，让父组件能自定义渲染样式（比如把状态数字渲染成彩色标签）。
3、表单的额外扩展：封装 SearchForm，除了固定的输入框外，用 #extra 插槽让父组件自由追加“高级筛选”或“导出按钮”。

三、高阶场景：数据驱动的“作用域插槽”
这是 Vue 插槽最强大的能力。子组件不仅把坑留出来，还把自己的数据（比如循环的列表项）交给父组件，让父组件决定怎么渲染。
1、列表/表格的个性化渲染（最典型）：子组件 DataList 负责请求接口、循环 v-for，但每一项具体显示成“卡片”、“带图文的行”还是“进度条”，完全由父组件通过插槽决定，子组件把 item 和 index 传出去。
2、表单校验的错误提示定制：子组件封装 FormItem，把校验规则和错误状态封装好，通过作用域插槽把 errorMessage 传给父组件，父组件可以自定义错误提示的样式（红色文字、弹窗或图标）。
3、树形组件的节点渲染：像 el-tree 这类组件，通过作用域插槽把每个节点的 data 传出来，让你自由决定节点前面加图标、加复选框还是加右键菜单。

四、特殊场景：渲染优化与兜底
1、提供默认内容：在 默认文案 里写备选文字，当父组件不传内容时显示，避免空白（比如弹窗默认显示“确认删除吗？”）。
2、配合 v-if 做条件渲染：通过 $slots 对象检测父组件是否传入了插槽内容，如果有内容则展示插槽，没有则隐藏整个模块（常用于优化无数据时的空白占位）