vue 元件之間通訊eventBus使用方法

eventBus使用場景: 兄弟元件之間通訊
例如有三個元件mainContent, main, head。main元件和head元件在mainContentl裡面平級為兄弟元件。
head元件裡面有一個輸入框點選搜尋的時候跳轉到main元件並且要帶引數過去，這個時候main元件可以在created或者mounted裡面獲取路由引數進行請求介面。
那麼當我們停留在main元件的時候 再次修改了查詢條件點選搜尋 , 這個時候main元件就無法再次請求介面了 , 因為main元件沒有重新載入 , 不會再次觸發created和mounted方法。接下來就要用到eventBus

1. 建立eventBus

import Vue from 'vue';
const eventBus = new Vue()
export { eventBus }

2. 在使用的元件頁面裡進行引入

import {eventBus} from '@/utils/eventBus.js'

3. 在head元件中點選搜尋使用eventBus觸發事件

search(){
//觸發事件
	eventBus.$emit('search',{keyWord:this.keyWord,searchType:this.select})
}

4. 在main元件裡面使用mounted呼叫eventBus監聽該事件

//監聽事件
mounted(){
    eventBus.$on('search',(data) => {
       this.keyWord = data.keyWord;
       this.select = data.searchType;
       this.search('search')
     })
   },

這樣每次點選都會通過eventBus進行監聽
注意在main元件銷燬前記得關閉監聽 , 不然頁面沒有重新整理當你切換到其它元件頁面在切換到搜尋元件頁就會重複進行監聽,會執行多次事件

//關閉監聽
beforeDestroy(){
   eventBus.$off("search");
 },