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

一、安装全局事件总线

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

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

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

Vue.prototype.$bus = this;

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

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

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

二、使用全局事件总线

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

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

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

三、解绑全局事件总线

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

相关推荐
lcc1871 小时前
Vue VueComponent
前端·vue.js
摇滚侠1 小时前
Vue 项目实战《尚医通》,预约挂号就诊人组件搭建上,笔记40
前端·javascript·vue.js·笔记
前端互助会4 小时前
Live2D形象展示与文本语音播报:打造生动交互体验的完整实现
前端·vue.js·microsoft·交互
chilavert3186 小时前
技术演进中的开发沉思-191 JavaScript: 发展历程(上篇)
开发语言·javascript·ecmascript
努力的小郑6 小时前
今晚Cloudflare一哆嗦,我的加班计划全泡汤
前端·后端·程序员
武昌库里写JAVA7 小时前
微擎服务器配置要求,微擎云主机多少钱一年?
java·vue.js·spring boot·后端·sql
dy17177 小时前
el-table表头上下显示内容
javascript·vue.js·elementui
q***64977 小时前
头歌答案--爬虫实战
java·前端·爬虫
凌波粒7 小时前
SpringMVC基础教程(4)--Ajax/拦截器/文件上传和下载
java·前端·spring·ajax
亮子AI7 小时前
给你的应用加上Google账号登录
javascript