全局通知弹窗应通过插槽实现内容可变性，核心在于合理设计默认插槽、具名插槽和作用域插槽；函数式调用时推荐用 renderContent/renderFooter 函数替代直接插槽。

全局通知弹窗（如 Toast、Dialog、Modal）用插槽，核心是把“内容可变的部分”交给使用者决定，而不是在组件内部写死。真正关键的不是“能不能用插槽”，而是“在哪留槽、留几个、要不要传数据回来”。

默认插槽：放最基础的提示文案或简单结构

适合纯文本提示、带图标的消息、单行操作按钮等轻量场景。子组件里只放一个 <slot></slot>，父组件直接在标签内写内容即可。

• 子组件 Dialog.vue 中：

  

    默认提示内容
  

• 调用时可写成：

  您已成功提交订单！

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

也支持嵌入图标、小段 HTML，甚至其他组件，比如 <icon-success></icon-success> 提交成功。

具名插槽：区分标题、正文、底部按钮等固定区域

当弹窗结构变复杂，比如需要自定义标题样式、控制底部按钮文字和行为，就该用具名插槽。子组件按功能区域命名，父组件对应填充。

• 子组件中定义：

提示
这里是默认正文

  确定

Springboot Vue Builder

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

下载

• 调用时用 v-slot:xxx 或简写 #xxx：

  
  
  

作用域插槽：让父组件能访问弹窗内部状态或回调参数

有些场景下，父组件需要根据弹窗当前状态（比如加载中、是否禁用按钮）或交互结果（如点击了哪个按钮、输入了什么）来渲染内容。这时子组件需把数据通过插槽属性暴露出去。

• 子组件中这样写：

  {{ isLoading ? '处理中...' : '确定' }}

• 父组件接收并使用：

常见于带异步确认的 Dialog：子组件触发请求后把 loading 状态传给父组件，由父组件决定按钮文案和禁用逻辑，保持 UI 一致性。

配合全局 API 使用时的插槽处理技巧

如果封装的是类似 Dialog.open({ title: 'xxx', content: 'xxx' }) 这样的函数式调用，插槽不能直接用——因为没地方写 <template></template>。这时候有两种主流解法：

• 用 render 函数或 h() 手动创建 VNode，把插槽内容作为参数传入；
• 更推荐的方式：提供 renderContent 和 renderFooter 两个函数类型的配置项，在内部用 h() 构建，再透传给实际渲染的组件；
• 例如：Dialog.open({ renderContent: () => h('div', [h('p', '自定义内容'), h(Icon, { name: 'info' })]) })。

这种方式既保留了函数调用的简洁性，又不牺牲插槽的灵活性，适合中大型项目统一管理全局弹窗。