Vue 组件通信:基于发布/订阅的方案扩展

夏晨姑娘_3276

夏晨姑娘_3276

2026-06-25

731人浏览

原创

pub/sub方案本质是解耦任意组件间消息传递,适用于跨层级协作场景;可用pubsub.js或手写事件总线实现,需注意订阅清理、消息名统一及异步时机。

vue 组件通信:基于发布/订阅的方案扩展

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 实例方法,但你可以快速封装一个轻量总线对象,避免引入额外包。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习