前言

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说如果两个页面没有任何引入和被引入关系，该如何通信了？

如果咱们的应用程序不需要类似Vuex这样的库来处理组件之间的数据通信，就可以考虑Vue中的事件总线，即 EventBus来通信。

`EventBus`的简介

EventBus又称为事件总线。在Vue中可以使用 EventBus来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

如何使用`EventBus`

一、初始化

首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。我们可以通过两种方式来处理。先来看第一种，新创建一个 .js 文件，比如 event-bus.js

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

实质上EventBus是一个不具备 DOM的组件，它具有的仅仅只是它实例方法而已，因此它非常的轻便。

另外一种方式，可以直接在项目中的main.js 初始化 EventBus :

// main.js
Vue.prototype.$EventBus = new Vue()

注意，这种方式初始化的EventBus是一个全局的事件总线。稍后再来聊一聊全局的事件总线。

现在我们已经创建了 EventBus，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

二、发送事件

假设你有两个Vue页面需要通信： A 和 B ，A页面在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。

<!-- A.vue -->
<template><button @click="sendMsg()">-</button>
</template><script>
import { EventBus } from "../event-bus.js";
export default {methods: {sendMsg() {EventBus.$emit("aMsg", '来自A页面的消息');}}
};
</script>

接下来，我们需要在 B页面中接收这则消息。

三、接收事件

<!-- IncrementCount.vue -->
<template><p>{{msg}}</p>
</template><script>
import { EventBus
} from "../event-bus.js";
export default {data(){return {msg: ''}},mounted() {EventBus.$on("aMsg", (msg) => {// A发送来的消息this.msg = msg;});}
};
</script>

同理我们也可以在 B页面向 A页面发送消息。这里主要用到的两个方法：

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

前面提到过，如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。

四、移除事件监听者

如果想移除事件的监听，可以像下面这样操作：

import { eventBus } from './event-bus.js'
EventBus.$off('aMsg', {})

你也可以使用EventBus.$off('aMsg')来移除应用内所有对此某个事件的监听。或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数。

上面就是 EventBus的使用方法，是不是很简单。上面的示例中我们也看到了，每次使用 EventBus时都需要在各组件中引入 event-bus.js 。事实上，我们还可以通过别的方式，让事情变得简单一些。那就是创建一个全局的 EventBus。接下来的示例向大家演示如何在Vue项目中创建一个全局的 EventBus。

全局`EventBus`

它的工作原理是发布/订阅方法，通常称为 Pub/Sub 。

创建全局`EventBus`

var EventBus = new Vue();Object.defineProperties(Vue.prototype, {$bus: {get: function () {return EventBus}}
})

在这个特定的总线中使用两个方法$on和$emit。一个用于创建发出的事件，它就是$emit；另一个用于订阅$on：

var EventBus = new Vue();this.$bus.$emit('nameOfEvent', { ... pass some event data ...});this.$bus.$on('nameOfEvent',($event) => {// ...
})

然后我们可以在某个Vue页面使用this.$bus.$emit("sendMsg", '我是web秀')，另一个 Vue页面使用

this.$bus.$on('updateMessage', function(value) {console.log(value); // 我是web秀
})

同时也可以使用this.$bus.$off('sendMsg')来移除事件监听。

总结

本文主要通过简单的实例学习了Vue中有关于 EventBus相关的知识点。主要涉及了 EventBus 如何实例化，又是如何通过$emit发送频道信号，又是如何通过 $on 来接收频道信号。最后简单介绍了如何创建全局的 EventBus。从实例中我们可以了解到， EventBus可以较好的实现兄弟组件之间的数据通讯。

本文转自：慕课网 / http://www.imooc.com/article/289043

教你轻松搞定Vue事件总线（EventBus）相关推荐

如何解决html文档无法复制,职场必备技能：网页文档无法复制，3招教你轻松搞定...
原标题:职场必备技能:网页文档无法复制,3招教你轻松搞定其实很多人在浏览网页时都会遇到这个问题,看到了自己喜欢的文章片段,某一段文字特别符合自己的工作汇报,想要复制下来,结果却发现弹出了窗口,不是让 ...
服务器微信服务号响应变慢,微信卡顿和响应慢，教大家轻松搞定：简单操作，赶快收藏分享吧...
原标题:微信卡顿和响应慢,教大家轻松搞定:简单操作,赶快收藏分享吧作者:快分享(ID:280062218)致力于互联网价值资讯交流分享,妙招.美食.攻略大放送,欢迎来撩!点击上面的"关注& ...
ppt中如何合并流程图_简单4招，教你轻松搞定PPT中的流程图！
原标题:简单4招,教你轻松搞定PPT中的流程图! 来自:PK阿锴(ID:akaippt) 作者:王培锴今天跟大家分享PPT流程图的制作方法,流程图相信大家都经常遇到,通常分布着许多节点,由线条链接起 ...
如何在原先的jqgrid中填充新的数据_自然人电子税务局（扣缴端）数据如何恢复？申税小微教您轻松搞定...
自然人电子税务局数据如何恢复? 申税小微教您轻松搞定! 财务小王:申税小微,我们公司换了新电脑,重新安装的自然人电子税务局(扣缴端)上没有人员采集信息和历史申报数据该怎么办? 申税小微: 1.可以在 ...
苹果备忘录丢失如何恢复，小编支招教你轻松搞定
文章目录方法一:使用官网云数据找回删除的备忘录方法二:通过云备份找回删除的备忘录方法三:通过云备份找回删除的备忘录备忘录是我们日常生活中记录事项的常用工具,相较于以往的笔和纸用本子记录,手机备 ...
vue 事件总线EventBus的概念、使用以及注意点
vue组件中的数据传递最最常见的就是父子组件之间的传递.父传子通过props向下传递数据给子组件:子传父通过$emit发送事件,并携带数据给父组件.而有时两个组件之间毫无关系,或者他们之间的结构复杂, ...
如何旋转PDF页面？两招教你轻松搞定
有很多职场新人在初入职场的时候,都会要对很多不同的文档进行处理,当处理到一些PDF文件的时候,会发现一些PDF文件是倒着的,这样的话就影响阅读的效率,也会影响人们阅读时的心情,那么当遇到倒着的PDF文 ...
教你轻松搞定RJ45网线接头
网络初学者经常为自己做网线而苦恼,不用愁,通过十一个步骤教你轻松学会RJ45接头网线的制作! EIA/TIA-568标准规定了两种RJ45接头网线的连接标准(并没有实质上的差别),即EIA/TIA-5 ...
cia转cci，手把手教你轻松搞定！
cia 和 cci 相互转换,我们用工具 makerom 都可以搞定哦,只是命令不一样而已. 工具获取: 小蓝枣的资源仓库,提取码:6wba 接下来我们来看看这个工具怎么来用: 步骤一: 把工具和要转 ...
抖音怎么上传照片图集？抖音照片视频怎么制作？大神教你轻松搞定！
抖音怎么上传照片图集?抖音照片视频或照片图集怎么制作?现在抖音上很多那种照片或图片做成的短视频,主题好,有音乐,还有文字或好看的切换效果.今天就请大神来教大家简单几步,轻松做一个好看的抖音照片图集!教 ...

教你轻松搞定Vue事件总线（EventBus）

前言

`EventBus`的简介

如何使用`EventBus`

一、初始化

二、发送事件

三、接收事件

四、移除事件监听者

全局`EventBus`

创建全局`EventBus`

总结

教你轻松搞定Vue事件总线（EventBus）相关推荐

最新文章

热门文章

教你轻松搞定Vue事件总线（EventBus）

前言

EventBus的简介

如何使用EventBus

一、初始化

二、发送事件

三、接收事件

四、移除事件监听者

全局EventBus

创建全局EventBus

总结

教你轻松搞定Vue事件总线（EventBus）相关推荐

最新文章

热门文章

`EventBus`的简介

如何使用`EventBus`

全局`EventBus`

创建全局`EventBus`