Vue 3 高复用弹窗组件通过具名插槽解耦头部与底部结构，配合 props 控制显隐、emits 透传事件实现交互闭环；默认提供标题栏与确认按钮，支持父组件自由定制内容与行为。

Vue 3 插槽实现高复用弹窗组件的头部与底部定制，核心是**用具名插槽解耦结构、配合 props 控制状态、再通过事件透传完成交互闭环**。不靠硬编码，也不依赖第三方库，纯原生能力就能做到灵活又稳定。

用具名插槽定义可替换区域

在弹窗子组件中，明确声明 header 和 footer 两个具名插槽出口，同时提供合理默认内容：

• 头部插槽：放在标题栏位置，支持自定义标题、关闭按钮、操作图标等；默认显示“提示”或传入的 title prop
• 底部插槽：放在操作区，支持自定义按钮组合（确认/取消/提交/导出等）；默认提供带 @click 触发关闭的 OK 按钮
• 所有插槽都包裹在语义化容器里（如 <div class="modal-header">），方便样式隔离和无障碍适配 <h3>父组件按需注入内容，不侵入子组件逻辑</h3> <p>调用时直接用 <code>#header 和 #footer 语法填入业务所需内容，完全独立于弹窗自身状态管理：
  

  Springboot Vue Builder

  从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

  下载
  • 可以放 <h2>删除确认</h2> 或带 icon 的 <el-icon><delete></delete></el-icon> 删除文件
  • 底部可放整行按钮组：<el-button type="primary">确定删除</el-button><el-button false>取消</el-button>
  • 甚至嵌套其它组件，比如一个封装好的 <confirmactions></confirmactions>，只要它接收 onConfirm 和 onCancel 即可

  配合 props + emits 实现状态与行为统一管控

  插槽只负责“长什么样”，真正的开关逻辑、关闭响应、确认回调必须由父子约定好接口：

  立即学习“前端免费学习笔记（深入）”；

  • 用 show 或 v-model:visible 控制显隐，避免直接操作 DOM 或 ref
  • 子组件内部不写 close 方法，而是统一 emit update:visible 或 close 事件，让父组件决定是否关闭、是否校验、是否触发 API
  • 底部插槽里的按钮，应绑定父组件传入的函数（如 @click="onConfirm"），而不是在子组件里硬编码逻辑

  加一点细节提升体验

  高复用不只是功能上能换内容，还要兼顾真实项目中的小痛点：

  • 头部右侧自动对齐关闭按钮（position: absolute; right: 16px），但允许父组件覆盖——比如全屏弹窗需要隐藏它
  • 底部默认按钮加 type="primary" 和 size="default"，保持 UI 一致性，也支持父组件用 class 或 style 覆盖
  • 插槽内容渲染前加 v-if="show" 判断，避免隐藏时仍执行子组件逻辑或请求