在vue中bus全域事件中心（詳細教學）

ue-bus 提供了一個全域事件中心，並將其註入每一個元件，你可以像使用內建事件流一樣方便的使用全域事件。這篇文章跟大家介紹了vue bus全域事件中心簡單Demo，需要的朋友參考下吧

1.vue-cli搭建好專案之後，使用npm安裝vue-bus

 npm install vue-bus

2.在入口檔main.js中全域註冊

 import Vue from 'vue';
 import VueBus from 'vue-bus';
 Vue.use(VueBus);

3.傳遞數據：

this.$bus.emit("eventName",data)

4.接收資料：

this.$bus.on("eventName",data)

5.注意事項

this的作用域要指向目前的vm實例，on監聽事件一般放在元件生命週期函數中的created或是mounted中，註銷bus需要在beforeDestroy中；

關於bus事件觸發多次的問題，一方面可能因為vue元件被重複使用，導致一個bus事件被重複註冊，破壞了「同事件名」bus，發送與接收唯一對應的關係；

另一方面是頁面路由的時候，原有頁面中的bus事件並沒有被註銷，依然隱藏在程式中。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

vue.js中$set與陣列更新方法_vue.js

JQuery選取select元件被選取的值方法

vue與vue-i18n結合實作後台資料的多語言切換方法

以上是在vue中bus全域事件中心（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！