前言

vue組件非常常見的有父子組件通信，兄弟組件通信。而父子組件通信就很簡單，父組件會通過 props 向下傳數(shù)據(jù)給子組件，當(dāng)子組件有事情要告訴父組件時會通過 $emit 事件告訴父組件。今天就來說說如果兩個頁面沒有任何引入和被引入關(guān)系，該如何通信了？

如果咱們的應(yīng)用程序不需要類似Vuex這樣的庫來處理組件之間的數(shù)據(jù)通信，就可以考慮Vue中的 事件總線 ，即 EventBus來通信。

EventBus的簡介

EventBus 又稱為事件總線。在Vue中可以使用 EventBus 來作為溝通橋梁的概念，就像是所有組件共用相同的事件中心，可以向該中心注冊發(fā)送事件或接收事件，所以組件都可以上下平行地通知其他組件，但也就是太方便所以若使用不慎，就會造成難以維護的“災(zāi)難”，因此才需要更完善的Vuex作為狀態(tài)管理中心，將通知的概念上升到共享狀態(tài)層次。

如何使用EventBus???

一、初始化

首先需要創(chuàng)建事件總線并將其導(dǎo)出，以便其它模塊可以使用或者監(jiān)聽它。我們可以通過兩種方式來處理。先來看第一種，新創(chuàng)建一個 .js 文件，比如 event-bus.js

實質(zhì)上EventBus是一個不具備 DOM 的組件，它具有的僅僅只是它實例方法而已，因此它非常的輕便。

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

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

注意，這種方式初始化的 EventBus 是一個 全局的事件總線 。稍后再來聊一聊全局的事件總線。

現(xiàn)在我們已經(jīng)創(chuàng)建了 EventBus ，接下來你需要做到的就是在你的組件中加載它，并且調(diào)用同一個方法，就如你在父子組件中互相傳遞消息一樣。

二、發(fā)送事件

假設(shè)你有兩個Vue頁面需要通信： A 和 B ，A頁面 在按鈕上面綁定了點擊事件，發(fā)送一則消息，想=通知 B頁面。

接下來，我們需要在 B頁面 中接收這則消息。

三、接收事件

<!-- IncrementCount.vue --> <template>  <p>{{msg}}</p> </template>  <script>  '../event-bus.js'; g}}  import {  ntB: ''  }  },  nt-bus.() {  rt default {('aMsg', ( ) => {  // A發(fā)送來的消息  }, = nte;  });  } }; </script>

同理我們也可以在 B頁面 向 A頁面 發(fā)送消息。這里主要用到的兩個方法：

前面提到過，如果使用不善，EventBus 會是一種災(zāi)難，到底是什么樣的“災(zāi)難”了？大家都知道vue是單頁應(yīng)用，如果你在某一個頁面刷新了之后，與之相關(guān)的EventBus會被移除，這樣就導(dǎo)致業(yè)務(wù)走不下去。還要就是如果業(yè)務(wù)有反復(fù)操作的頁面，EventBus在監(jiān)聽的時候就會觸發(fā)很多次，也是一個非常大的隱患。這時候我們就需要好好處理 EventBus 在項目中的關(guān)系。通常會用到，在vue頁面銷毀時，同時移除EventBus 事件監(jiān)聽。

移除事件監(jiān)聽者

如果想移除事件的監(jiān)聽，可以像下面這樣操作：

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

你也可以使用 EventBus.$off('aMsg') 來移除應(yīng)用內(nèi)所有對此某個事件的監(jiān)聽?；蛘咧苯诱{(diào)用 EventBus.$off() 來移除所有事件頻道，不需要添加任何參數(shù) 。

上面就是 EventBus 的使用方法，是不是很簡單。上面的示例中我們也看到了，每次使用 EventBus 時都需要在各組件中引入 event-bus.js 。事實上，我們還可以通過別的方式，讓事情變得簡單一些。那就是創(chuàng)建一個全局的 EventBus 。接下來的示例向大家演示如何在Vue項目中創(chuàng)建一個全局的 EventBus 。

全局EventBus

它的工作原理是發(fā)布/訂閱方法，通常稱為 Pub/Sub 。

創(chuàng)建全局EventBus

在這個特定的總線中使用兩個方法 $on 和 $emit 。一個用于創(chuàng)建發(fā)出的事件，它就是 $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.$off('sendMsg')來移除事件監(jiān)聽。

總結(jié)

本文主要通過簡單的實例學(xué)習(xí)了Vue中有關(guān)于 EventBus 相關(guān)的知識點。主要涉及了 EventBus 如何實例化，又是如何通過 $emit 發(fā)送頻道信號，又是如何通過 $on 來接收頻道信號。最后簡單介紹了如何創(chuàng)建全局的 EventBus 。從實例中我們可以了解到， EventBus 可以較好的實現(xiàn)兄弟組件之間的數(shù)據(jù)通訊。

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關(guān)注哦！