热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue——全局事件总线(GlobalEventBus)

一.什么是全局事件总线?1.一种组件间通信的方式,适用于任意组件间通信。是根据VueComponent.prototype.__proto__Vue.prototype的原理来进行

一.什么是全局事件总线?

1.一种组件间通信的方式,适用于任意组件间通信。

是根据VueComponent.prototype.__ proto__ = Vue.prototype的原理来进行全局引用


二.全局事件总线的使用?

(i)安装全局事件总线

在main.js中的vue实例中写入beforeCreate

其中bus可以改其他名字,this指定vue实例

 

(ii)使用事件总线(分为两步:传递数据,接收数据)

我这总共用两个组件:school组件、student组件

1.student组件向school组件传递数据

使用emit传递数据(此组件为student组件)

传递数据写法:this.$bus.$emit('xxxx',数据)

 

2.school组件接收student传来的数据

使用on接收数据(此组件为school组件)

接收数据写法:this.$bus.$on('xxxx',data=>{.......})

接收的函数要用箭头函数,this指向VueComponent,如果是普通函数则指向Vue函数

 

3.最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

 

4.结果:

 



推荐阅读
author-avatar
魅力无穷2
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有