Pub/Sub方案本质是解耦任意组件间消息传递，适用于跨层级协作场景；可用PubSub.js或手写事件总线实现，需注意订阅清理、消息名统一及异步时机。
Vue 组件通信中，基于发布/订阅（Pub/Sub）的方案本质是解耦任意组件之间的消息传递，不依赖父子、兄弟或嵌套关系。它适用于跨层级、非直接关联的组件协作场景，比如全局搜索触发列表刷新、登录状态变更通知多个模块等。核心在于“谁发谁收不耦合”，只要约定好消息名，就能完成通信。
用 PubSub.js 实现轻量级通信
PubSub.js 是一个零依赖、通用性强的第三方库，Vue2 和 Vue3 均可直接使用，无需框架适配。
- 安装：
npm install pubsub-js - 在发送方（如 Header.vue）调用
PubSub.publish('search-keyword', 'vue') - 在接收方（如 List.vue）用
mounted订阅：this.pubId = PubSub.subscribe('search-keyword', (msg, keyword) => { this.fetchData(keyword); }) - 必须在
beforeUnmount（Vue3）或beforeDestroy（Vue2）中取消订阅：PubSub.unsubscribe(this.pubId)，防止内存泄漏
手写简易事件总线（适合 Vue3 项目）
Vue3 移除了 $on/$off/$emit 实例方法，但你可以快速封装一个轻量总线对象，避免引入额外包。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 新建
event-bus.js，导出含$on、$emit、$off方法的对象 -
$on以事件名为 key 存储回调数组；$emit遍历执行对应回调；$off支持清除全部或指定回调 - 组件中导入后，
bus.$on('user-login', handler)订阅，bus.$emit('user-login', userInfo)发布 - 注意：该对象是单例，所有组件共享同一份事件池，适合中小型项目
与 Vue 内置机制的配合建议
发布/订阅不是万能替代品，需结合场景判断是否合适：
立即学习“前端免费学习笔记（深入）”；
- 父子通信优先用
props+emit，语义清晰、调试友好 - 深层嵌套或多处响应同一状态时，考虑 Pinia（Vue3）或 Vuex（Vue2），提供响应式+持久化能力
- 仅需一次广播且逻辑简单（如 toast 提示、权限切换通知），PubSub 或手写总线更轻快
- 避免在大量组件中高频订阅同一消息名，否则影响性能；可加命名空间前缀，如
'auth:login'、'ui:dark-mode-toggle'
常见陷阱与规避方式
实际落地时容易忽略几个关键细节：
- 忘记取消订阅 → 组件卸载后回调仍被触发，造成数据错乱或报错。务必绑定生命周期钩子清理
- 消息名拼写不一致 → 发布用
'data-updated'，订阅写成'data-updated '（多空格）就收不到。建议统一定义为常量对象导出 - 在 setup 中使用时，箭头函数内
this不可用 → 直接传入普通函数或用ref保存订阅 ID，便于后续取消 - 异步操作中发布消息过早 → 比如请求未返回就
publish，接收方拿到空数据。应确保在响应成功回调里发布
