Vue事件總線EventBus

在vue裏面兩個不相關的頁面，比如Atab頁面打開到Btab頁面，在B頁面中操作了一下，回到A頁面，希望刷新UI，怎麼實現呢？
普通的父子組件間傳遞消息通信，可以用props傳值傳回調函數，這種兩個頁面的可以用eventbus來解決。
1.定義EventBus
在main.js裏掛載EventBus
import Vue from 'vue' Vue.prototype.$EventBus = new Vue()
2.在A頁面的mounted方法中定義接收的事件方法
mounted(){ console.log('mounted=========') this.$EventBus.$on("refreshRecord", (msg) => { // A發送來的消息 //alert(msg); this.refresh(); }); },
3.在B頁面定義發送事件的方法，比如在點擊返回的時候發送刷新事件
goBack() { window.history.back(); this.$EventBus.$emit('refreshRecord','刷新UI'); },

這樣就可以全局發送接收消息了，這裏面要注意發送的事件和接收事件的名稱要一致，比如都是refreshRecord。