弹窗组件应使用具名插槽精准控制header、footer和默认主体内容；子组件通过<slot name="header">等定义位置并提供默认内容；父组件用v-slot:#header投递内容；需配合作用域插槽暴露内部方法以增强交互。
弹窗组件的头部和底部区域，适合用具名插槽来精准控制内容定制。默认插槽留给主体内容，而 header 和 footer 这类固定位置、语义明确的区域，必须通过 name 区分，避免内容错位或覆盖。
子组件中定义具名插槽位置
在弹窗子组件（如 Modal.vue）模板里，用 <slot name="header"></slot> 和 <slot name="footer"></slot> 明确标记可替换区域。默认插槽 <slot></slot> 放在中间，承载表单、文字、图片等主体内容。
- 每个具名插槽建议提供合理默认内容，比如
<slot name="header"><h2>提示</h2></slot>，防止父组件未传时界面留白 - 不要把多个逻辑区域共用一个插槽，例如 header 和 footer 都塞进默认插槽——后期维护难，样式也容易错乱
父组件中按名投递内容
使用 v-slot:#header（简写）或 <template #header></template> 把自定义标题结构注入对应位置；同理用 #footer 填充按钮组或操作栏。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 支持任意合法 HTML 或子组件，比如
<template #header><Icon name="info"/>系统通知</template> - 如果某次调用不需要自定义 header，直接不写
#header模板，就会回退到子组件里设的默认内容 - 注意：
v-slot只能用在<template>标签上，不能直接写在普通标签（如<div #header>）上
配合作用域插槽增强交互能力
当 footer 需要访问弹窗内部状态（比如 loading 状态、是否允许关闭），可以把数据通过插槽属性暴露出去，改用作用域插槽：
立即学习“前端免费学习笔记（深入）”；
- 子组件写成
<slot name="footer" :confirm="handleConfirm" :cancel="handleCancel"></slot> - 父组件用
<template #footer="{ confirm, cancel }"><Button @click="confirm">确定</Button></template> - 这样既保持结构解耦，又让父组件能直接调用子组件的方法，无需 emit 或 ref
