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

一、安装全局事件总线

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

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

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

Vue.prototype.$bus = this;

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

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

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

二、使用全局事件总线

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

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

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

三、解绑全局事件总线

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

相关推荐
先吃饱再说11 分钟前
JavaScript中`this` 的“千层套路”:从默认绑定到箭头函数的五种指向
javascript
玄星啊15 分钟前
AI 编程的第 30 天,我怀念古法 Coding 了
前端·ai编程
Jolyne_15 分钟前
Angular基础速通
前端·angular.js
foxire22 分钟前
基于nodejs实现服务端内核引擎
javascript
锋行天下1 小时前
半秒开!还有谁!!!
前端·vue.js·架构
代码搬运媛2 小时前
git 下中文文件名乱码问题解决
前端
CaffeinePro2 小时前
告别知识点零散!React零基础通关,从环境搭建到Ant Design页面实战
前端·react.js
cidy_983 小时前
水龙头领不到测试币?手把手用 Hardhat 本地环境零门槛学以太坊交易
前端
因_崔斯汀3 小时前
Three.js 3D 地图特效与材质实现指南
前端
angerdream3 小时前
手把手编写儿童手机远程监控App之vue3用 AI Agent生成菜单
前端