Vue eventbus 使用中的重複觸發解決方案及存在的Bug

前言

        你們還在嗎有一週時間不見了吧，那麼這周講一些什麼呢，不知道大家是否還記得我上週說過的這周要講eventbus，其實eventbus仍是有bug的，那麼廢話很少說直接開始正題

eventbus重複觸發的bug

        記得上週我講過的demo嗎，如今整理一下

//main.js
window.Bus =new Vue();
//a.vue
...
 beforeCreate(){
    Bus.$on("this_change",[1,2])
 }
....
//b.vue
...
created(){
    Bus.$on("this_change",(em) => {
        //這樣就能夠打印出來剛剛傳過來的1和2了
        console.log(em[1],em[2]); 
    });
}，
beforeDestroy(){
    //最後不要忘了刪除傳輸事件
    Bus.$off("this_change")
}
複製代碼

        很簡單對吧，那麼你就大錯特錯了由於咱們的理想狀態是使用完一次組件以後就當即刪除該組件以保證傳輸事件的刪除，可是實際狀況呢，有很大不一樣這點你們應該都想到了對吧，因此咱們接下來要講的是實際場景中的應用。

        順便說一嘴上面代碼塊的代碼有不少都是省略的，這個你們要拿去作demo的時候要注意，代碼補全。

        那麼咱們下面要講的場景是我這邊真實發生的一個場景，由於我作的是關於區塊鏈金融部分的內容因此在實際需求中我作的頁面並不須要刷新和緩存數據可是有一點就是，在不刷新頁面或組件的狀況下要經過子組件之間互相傳遞數據，這點你們應該能瞬間想到不少吧，好比兩個子組件不公用ajax數據，每一個組件單獨請求，又或者是吧數據存在本地而後調用，又或者是把數據傳入最上層父組件以後再經過父組件分發的形式傳入對應的子組件完成交互。可是你們不知道有沒想過這樣幾個方法不只費力不討好並且子組件之間傳值一旦多了demo還好可是到項目這塊是否是就很差控制了，相對於比較小的項目來講eventbus的使用仍是比較省事省力的，用較少的代碼完成交互。

        說了這麼多解決方案是什麼，那固然就是eventbus來解決嘍，可是你們注意剛纔我說的在組件和頁面不刷新的前提下了嗎，這個時候咱們就應該能想到，beforeDestroy()的Bus.$off是否是就不會銷燬一直存在呢，答案是確定的，可是更絕望的是你若是在這個組件上多註冊幾個傳輸事件和接收事件的話那麼這些傳輸事件和接收事件來回切換的話那麼你試着打印就會發現這些事件在點擊多了之後會以遞增的方式進行觸發，這就是eventbus在實際使用和作demo的區別。

        迴歸正題這種bug怎麼解決呢

        第一種是在使用過Bus.$on以後當即使用Bus.$off方法，可是作過以後發現了一個說不大也不大說不小也的bug就是在Bus.$0ff以後這個觸發事件只會觸發一次，那麼上網上查了一下一篇尤大神的回答，非常不錯，就貼在下面了網址

github.com/vuejs/vue/i…

        這個回答裏面有說mixin這個方法是能夠解決的至於怎麼去解決這個問題我會在下週的文章裏講到也是下週文章的一個主題吧，至於這裏的解決方案有一種比較快速的解決方案介紹給你們vue-happy-bus這個插件專門是爲Busevent而生的，這個以後再講，先講一下Bus.$off要放在那裏

//b.vue
//我把上面的東西拿過來是爲了你們能看得清楚
created(){
    Bus.$on("this_change",(em) => {
        //這樣就能夠打印出來剛剛傳過來的1和2了
        console.log(em[1],em[2]); 
        //這裏就是我說的在使用以後當即刪除這個事件以防屢次觸發
        Bus.$off("this_change",em);
    });
}
複製代碼

        可是上面的這個方法仍是有一些小問題，好比有事觸發不了，或者有時會報錯，這幾個都不是最佳解決方案，可是上面說的vue-happy-bus這個插件就完美解決了此問題，這個咱們留在下下週的文章中我會花一篇文章的時間講解這個組件的實現思想。

vue-happy-bus

        你們也看到了上面我這麼推崇vue-happy-bus這個組件大家是否是在想有何不一樣，這個組件，他究竟解決了咱們的問題沒，這個我能夠很負責任的告訴你們這個確實解決了咱們如今的所需，廢話很少說先看代碼

//npm或cnpm下載
npm install vue-happy-bus --save
cnpm install vue-happy-bus --save
//main.js中引用
//bus狀態管理
import BusFactory from 'vue-happy-bus'
//使用全局變量引用
Vue.prototype.$BusFactory=BusFactory;
//a.vue中引用這裏注意一點每一個使用Bus的組件中都要在data中註冊這個事件Bus:this.$BusFactory(this)這樣才能調用其中這個this指向vue原型
....
data:function(){
    Bus:this.$BusFactory(this)
},
methods:{
    //在點擊事件上執行這個方法就能傳遞參數
    click_me:function(){
        this.Bus.$emit("clear_me","clear_me")
    }
}
....
//b.vue
....
created(){
     this.Bus.$on("clear_me",(em) => {
        console.log(em)
     }
}
....
複製代碼

        是不不是在奇怪爲何我沒用Bus.$off方法由於在咱們調用Bus.$on的時候vue-happy-bus就已經幫咱們建立過off事件並自動掛載在事件結束的時候調用，這樣咱們使用一次那麼它就會直接把Bus.$off自動調用一次，就至關因而刪除了整個事件，就是這樣，具體的還要看我下下週的文章。

        好了此次把上次的坑給埋了又留下兩個坑等着我去踩，那麼你們此次的分享就到這，謝謝觀看，想要提問的能夠在下面評論區討論。