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

一、安装全局事件总线

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

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

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

Vue.prototype.$bus = this;

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

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

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

二、使用全局事件总线

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

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

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

三、解绑全局事件总线

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

相关推荐
葡萄城技术团队几秒前
解锁 SpreadJS 扩展能力:ECharts 集成与自定义渲染实战
前端
来一颗砂糖橘3 分钟前
CSS 清除浮动深度解析:从 clear: both 到现代布局方案
前端·css·clearboth·清除浮动
南宫码农5 分钟前
Node.js和npm本地安装详细教程(全系统适配)
前端·npm·node.js
我命由我1234510 分钟前
前端开发 - this 指向问题(直接调用函数、对象方法、类方法)
开发语言·前端·javascript·vue.js·react.js·html5·js
小黑的铁粉11 分钟前
ecahrts图形多的页面,怎么解决数据量大的渲染问题?
前端·echarts
低保和光头哪个先来12 分钟前
TinyEditor 篇1:实现工具栏按钮向服务器上传图片
服务器·开发语言·前端·javascript·vue.js·前端框架
还是大剑师兰特14 分钟前
vue3+vite+JS,使用Echarts封装一个饼图,父子组件联动
javascript·vue.js·echarts
A黄俊辉A20 分钟前
webstorm+vue+esLint+pretter配置
前端·vue.js·webstorm
TYFHVB1220 分钟前
2026六大主流CRM横评,五大核心维度深度解析
大数据·前端·数据结构·人工智能
LiuMingXin23 分钟前
断网也能装包? 我在物理隔离内网搭了一套完整的私有npm仓库
前端·面试·npm