Vue 3 中实现全局通知栏需用独立事件中心解耦，推荐 mitt 库：安装后创建 eventBus 实例，通知栏组件监听 'show:notification' 事件，任意组件 emit 触发；也可用 provide/inject 或封装为 useNotification composable，注意清理监听器防内存泄漏。
Vue 中没有内置的“全局事件总线”机制（Vue 3 已移除 Vue.prototype.$emit 和 EventBus），所以实现全局通知栏的事件触发，核心思路是：**用一个独立的响应式事件中心（如 mitt 或自定义事件管理器）解耦通知触发与展示逻辑**。通知栏组件监听事件，任意组件触发事件即可弹出通知。
用 mitt 实现轻量级全局事件通信（推荐 Vue 3）
mitt 是目前 Vue 3 生态中最常用、零依赖的事件总线方案，比 Vue 2 的 EventBus 更简洁安全。
- 安装：
npm install mitt - 创建事件中心（例如
plugins/eventBus.js）：import mitt from 'mitt'<br>export const eventBus = mitt()
- 在通知栏组件（如
NotificationBar.vue）中监听：import { eventBus } from '@/plugins/eventBus'<br><br>export default {<br> mounted() {<br> eventBus.on('show:notification', (payload) => {<br> this.notifications.push({<br> id: Date.now(),<br> message: payload.message,<br> type: payload.type || 'info'<br> })<br> })<br> },<br> beforeUnmount() {<br> eventBus.off('show:notification')<br> }<br>} - 在任意组件中触发通知：
import { eventBus } from '@/plugins/eventBus'<br><br>// 触发全局通知<br>eventBus.emit('show:notification', {<br> message: '操作成功！',<br> type: 'success'<br>)
用 provide / inject + emits 模拟“局部全局”（适合中小项目）
如果你希望通知栏只对某一层级（如整个 App 或 Layout）内有效，避免跨模块污染，可用 provide/inject 配合一个统一的通知函数。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 在根组件（如
App.vue）中提供通知方法：import { provide, ref } from 'vue'<br><br>export default {<br> setup() {<br> const notifications = ref([])<br> const notify = (message, type = 'info') => {<br> notifications.value.push({<br> id: Date.now(),<br> message,<br> type<br> })<br> }<br> provide('notify', notify)<br> return () => h('router-view')<br> }<br>} - 在通知栏组件中注入并响应：
import { inject } from 'vue'<br><br>export default {<br> setup() {<br> const notify = inject('notify')<br> // 不需要 emit，直接调用 notify 即可<br> }<br>} - 子组件中使用：
import { inject } from 'vue'<br><br>export default {<br> setup() {<br> const notify = inject('notify')<br> const handleClick = () => {<br> notify('提交完成', 'success')<br> }<br> return () => <button onClick={handleClick}>提交</button><br> }<br>}
封装成可复用的 composable（Vue 3 Composition API 最佳实践）
把通知逻辑抽成组合式函数，让调用更语义化、支持 TypeScript、便于测试。
立即学习“前端免费学习笔记（深入）”；
- 创建
composables/useNotification.js：import { eventBus } from '@/plugins/eventBus'<br><br>export function useNotification() {<br> const show = (message, options = {}) => {<br> eventBus.emit('show:notification', { message, ...options })<br> }<br> const success = (message, options = {}) => show(message, { type: 'success', ...options })<br> const error = (message, options = {}) => show(message, { type: 'error', ...options })<br> return { show, success, error }<br>} - 在组件中使用：
import { useNotification } from '@/composables/useNotification'<br><br>export default {<br> setup() {<br> const { success, error } = useNotification()<br> const onSubmit = () => {<br> success('保存成功')<br> // 或 error('网络错误')<br> }<br> return () => <button onClick={onSubmit}>保存</button><br> }<br>}
注意事项与避坑点
避免内存泄漏和事件重复绑定是关键。
- 使用
mitt时，务必在组件卸载前调用off清理监听器（尤其在onMounted/onBeforeUnmount中配对） - 不要在
setup函数里反复调用on（比如放在循环或响应式副作用中），否则会叠加监听器 - 通知 ID 建议用
Symbol()或crypto.randomUUID()（兼容性需检查），避免时间戳冲突 - 若通知需自动关闭，应在通知栏组件内用
setTimeout或useTimeoutFn（@vueuse/core）控制销毁
