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

一、安装全局事件总线

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

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

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

Vue.prototype.$bus = this;

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

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

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

二、使用全局事件总线

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

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

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

三、解绑全局事件总线

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

相关推荐
老王以为2 分钟前
单仓库下的四十模块 —— React Monorepo 工程架构拆解
前端·react native·react.js
lichenyang4537 分钟前
鸿蒙路由研读:为什么公司项目用 HMRouterMgr 而不用原生 Navigation
前端
gf13211119 分钟前
【精确查找python脚本是否在运行】
linux·前端·python
mCell17 分钟前
别急着骂运营商,你家路由器里可能藏着一台 PCDN 盒子
前端·http·cdn
PILIPALAPENG18 分钟前
Skills篇-findskills:告别手动迁移Skill!跨AI工具通用能力,才是真高效
前端·人工智能·后端
假如让我当三天老蒯19 分钟前
Composables和Utils的区别(自学用)
前端
kungggyoyoyo22 分钟前
从0开发一套geo优化软件:系统定位与整体架构
前端
用户7138742290024 分钟前
PKCE 的 S256 算法深度剖析:从协议设计到密码学原理
前端
闪闪发光得欧24 分钟前
StreamTokenizer的源码分析和使用方法详细分析
前端
李剑一25 分钟前
华为一面就问网络安全?面试官:请简述一下 XSS/CSRF 的攻击面与前端侧的防护
前端·面试