Vue全局事件总线实现任意组件间通信

一、安装全局事件总线

全局事件总线就像是一个工具,专门用于挂载自定义事件和。

想要所有的组件都能使用这个全局事件总线,就只有在Vue的原型身上添加一个能够绑定自定义事件的属性。

所以我们在创建Vue实例对象的时候就可以添加如下代码:

Vue.prototype.$bus = this;

这段代码一定要在beforeCreate 生命周期函数中进行!

因为在vm创建过后所有的组件都已经创建完成,再添加事件总线的时候已经晚了。

在vm创建之前还没有vm,this不是指向vm的。

二、使用全局事件总线

我们用Students组件向School组件传递name属性为例子:

定义自定义事件依旧是使用的on, 触发自定义事件使用emit

对自定义事件不了解可以看这篇文章:Vue组件自定义事件实现子组件给父组件传递数据-CSDN博客

三、解绑全局事件总线

当一个全局事件中的自定义事件不再使用时,我们最好在beforeDestroy生命周期函数中使用$off() 对事件进行解绑。

相关推荐
毕设十刻6 小时前
基于Vue的考勤管理系统8n7j8(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
coding随想6 小时前
掌控选区的终极武器:getSelection API的深度解析与实战应用
java·前端·javascript
嵌入式小能手6 小时前
飞凌嵌入式ElfBoard-文件I/O的深入学习之存储映射I/O
java·前端·学习
沐风。567 小时前
Object方法
开发语言·前端·javascript
程序猿小蒜7 小时前
基于springboot的医院资源管理系统开发与设计
java·前端·spring boot·后端·spring
JS_GGbond7 小时前
JavaScript入门学习路线图
开发语言·javascript·学习
BD_Marathon8 小时前
【JavaWeb】JS_JSON在客户端的使用
开发语言·javascript·json
仙人掌一号8 小时前
梳理SPA项目Router原理和运行机制 [共2500字-阅读时长10min]
前端·javascript·react.js
粥里有勺糖8 小时前
视野修炼-技术周刊第128期 | Bun 被收购
前端·javascript·github
用户12039112947268 小时前
彻底搞定大模型流式输出:从二进制碎块到“嘚嘚嘚”打字机效果,让底层逻辑飞起来
前端·javascript·面试