props无法实现全局通知弹窗，因其仅支持父子单向传递，而全局弹窗与业务组件无直接父子关系；必须借助pinia状态管理或provide/inject+事件总线实现发布-订阅。
Props 本身不适用于“全局弹窗中渲染通知消息队列”这种跨层级、多触发源的场景。它只负责父→子的单向数据传递，而通知系统需要：任意组件能“发消息”，全局弹窗（通常挂载在 App 根级或 Portal）能“收并渲染队列”。直接用 Props 无法实现，必须组合其他机制。
为什么不能只靠 Props
全局通知弹窗一般独立存在，比如放在 <app></app> 最外层或用 Teleport 渲染到 body 底部。它和业务组件（如按钮、表单、列表）没有直接父子关系——既不是它们的父，也不是它们的子。Props 只能在明确父子链中传递，跨兄弟、跨路由、跨异步组件时完全失效。
正确做法：Props 配合事件总线或状态管理
全局通知的核心是“发布-订阅”模型。你需要一个中心化的消息通道，让任何组件都能调用 notify({ type: 'success', content: '提交成功' })，而弹窗组件监听该通道并维护内部队列。
-
推荐用 Pinia（Vue 3 官方推荐）：创建一个
useNotificationStore，含queue数组和add(item)方法；全局弹窗<notificationlist></notificationlist>用store.queue响应式渲染；任意组件引入 store 并调用store.add({...}) -
轻量替代：使用 provide/inject + 事件总线：在
main.js或App.vue中provide('notify', (msg) => {...})，再配合一个简单的事件总线（如const bus = mitt()），弹窗组件onMounted(() => bus.on('notify', handler))，业务组件触发bus.emit('notify', msg) - 不推荐：用 Props 把消息“层层透传”：比如从 Button → Page → Layout → App → Notification，不仅代码冗长，还破坏封装性，且无法支持动态添加/移除通知、自动关闭、手动清除等交互逻辑
弹窗组件如何渲染队列（关键细节）
假设你用了 Pinia，弹窗组件可这样写：
- 用
v-for遍历store.queue，每个通知项带唯一id（建议用Date.now() + Math.random()） - 每条通知绑定
:key="item.id"确保 DOM 正确复用 - 设置定时器自动关闭时，用
setTimeout并在onBeforeUnmount清理，避免内存泄漏 - 关闭某条通知时，调用
store.remove(item.id)，而非直接splice—— 确保响应式更新
如果非要“带 Props 的弹窗”怎么用
仅当弹窗是某个页面的**局部子组件**（比如只在订单页出现的提示框），才适合用 Props 控制显隐和内容：
- 父组件传入
:visible.sync="showTip"和:message="tipMsg" - 弹窗内部不维护队列，只渲染单条；需下一条时由父组件先更新
tipMsg再设showTip = true - 这本质是“受控组件”，适合简单场景，但无法满足“多个消息排队出现”的需求
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
