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

一、安装全局事件总线

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

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

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

Vue.prototype.$bus = this;

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

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

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

二、使用全局事件总线

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

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

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

三、解绑全局事件总线

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

相关推荐
Irene199121 小时前
Vue3 规范推荐的 <script setup> 中书写顺序(附:如何响应路由参数变化)
vue.js·路由
pusheng202521 小时前
普晟传感2026年新春年会总结与分析
前端·javascript·html
谢尔登21 小时前
React19事件调度的设计思路
前端·javascript·react.js
Emma_Maria21 小时前
本地项目html和jquery,访问地址报跨域解决
前端·html·jquery
奋斗吧程序媛21 小时前
常用且好用的命令
前端·编辑器
2301_7965125221 小时前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:Lazyload 懒加载(懒加载的图片)
前端·javascript·react native·react.js·ecmascript·harmonyos
敲敲了个代码1 天前
从N倍人力到1次修改:Vite Plugin Modular 如何拯救多产品前端维护困境
前端·javascript·面试·职场和发展·typescript·vite
摘星编程1 天前
OpenHarmony环境下React Native:Timeline时间轴组件
javascript·react native·react.js
摘星编程1 天前
在OpenHarmony上用React Native:Timeline水平时间轴
javascript·react native·react.js
Yff_world1 天前
网络安全与 Web 基础笔记
前端·笔记·web安全