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

一、安装全局事件总线

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

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

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

Vue.prototype.$bus = this;

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

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

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

二、使用全局事件总线

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

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

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

三、解绑全局事件总线

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

相关推荐
gyx_这个杀手不太冷静23 分钟前
Agent开发进阶指南(第 1 章):AI Agent 到底是什么?
前端·agent·ai编程
小小小小宇1 小时前
模型相关知识
前端
小小小小宇1 小时前
模型相关知识二
前端
IT_陈寒1 小时前
Python装饰器竟然偷偷改了函数名?这个坑我爬了三天
前端·人工智能·后端
free352 小时前
作用域链与 Environment:变量查找、遮蔽和赋值怎么实现
javascript
Momo__2 小时前
Vite 8.1 打包开发模式——10000 组件冷启动 15 倍,"No Bundle Dev" 七年后被自己终结
前端·vue.js·vite
YHL2 小时前
🤖 Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·javascript·人工智能
Monki2 小时前
AI 规范式 UI 设计,一键批量出页,高效落地不翻车
前端
山河木马2 小时前
渲染管线-计算得到gl_FragColor(片元着色器)之后续GPU流程
前端·webgl·计算机图形学
不想说话的麋鹿2 小时前
「项目实战」我用 Codex + GPT-5.5 + Trellis "氛围编程",独立做了一个情侣厨房小程序
前端·agent·全栈