Vue 组件通信如何通过 Props 传递通知消息队列在全局弹窗中渲染

Props无法实现全局通知弹窗，因其仅支持父子单向传递，而全局弹窗与业务组件无直接父子关系；必须借助Pinia状态管理或provide/inject+事件总线实现发布-订阅。

Props 本身不适用于“全局弹窗中渲染通知消息队列”这种跨层级、多触发源的场景。它只负责父→子的单向数据传递，而通知系统需要：任意组件能“发消息”，全局弹窗（通常挂载在 App 根级或 Portal）能“收并渲染队列”。直接用 Props 无法实现，必须组合其他机制。

为什么不能只靠 Props

全局通知弹窗一般独立存在，比如放在 <App> 最外层或用 Teleport 渲染到 body 底部。它和业务组件（如按钮、表单、列表）没有直接父子关系——既不是它们的父，也不是它们的子。Props 只能在明确父子链中传递，跨兄弟、跨路由、跨异步组件时完全失效。

正确做法：Props 配合事件总线或状态管理

全局通知的核心是“发布-订阅”模型。你需要一个中心化的消息通道，让任何组件都能调用 notify({ type: 'success', content: '提交成功' })，而弹窗组件监听该通道并维护内部队列。

1. 推荐用 Pinia（Vue 3 最新推荐）：创建一个 useNotificationStore，含 queue 数组和 add(item) 方法；全局弹窗 <NotificationList> 用 store.queue 响应式渲染；任意组件引入 store 并调用 store.add({...})
2. 轻量替代：使用 provide/inject + 事件总线：在 main.js 或 App.vue 中 provide('notify', (msg) => {...})，再配合一个简单的事件总线（如 const bus = mitt()），弹窗组件 onMounted(() => bus.on('notify', handler))，业务组件触发 bus.emit('notify', msg)
3. 不推荐：用 Props 把消息“层层透传”：比如从 Button → Page → Layout → App → Notification，不仅代码冗长，还破坏封装性，且无法支持动态添加/移除通知、自动关闭、手动清除等交互逻辑

弹窗组件如何渲染队列（关键细节）

假设你用了 Pinia，弹窗组件可这样写：

1. 用 v-for 遍历 store.queue，每个通知项带唯一 id（建议用 Date.now() + Math.random()）
2. 每条通知绑定 :key="item.id" 确保 DOM 正确复用
3. 设置定时器自动关闭时，用 setTimeout 并在 onBeforeUnmount 清理，避免内存泄漏
4. 关闭某条通知时，调用 store.remove(item.id)，而非直接 splice —— 确保响应式更新

如果非要“带 Props 的弹窗”怎么用

仅当弹窗是某个页面的局部子组件（比如只在订单页出现的提示框），才适合用 Props 控制显隐和内容：

1. 父组件传入 :visible.sync="showTip" 和 :message="tipMsg"
2. 弹窗内部不维护队列，只渲染单条；需下一条时由父组件先更新 tipMsg 再设 showTip = true
3. 这本质是“受控组件”，适合简单场景，但无法满足“多个消息排队出现”的需求