VUE中使用bus傳值時,接收頁面多次觸發接收方法的問題

使用bus在兄弟組件間傳遞值時,可能會有多個組件監聽通過bus傳出的值。比如:

組件A的一個按鈕事件中有這麼一句:bus.$emit('getUnitId',data);組件B、C、D中監聽接收。

在組件B中接收的代碼如下

mounted(){

    bus.$on("getUnitId",  function(data){

        console.log(data);

    });

},

發現組件B中的 console.log(data)  被執行了多次。

解決:

每個監聽這個bus事件的組件,按如下代碼修改:

mounted(){

    bus.$on("getUnitId", this.dealBusData);

},

methods:{

    dealBusData(data){

          console.log(data);

    }

},

beforeDestroy(){

      bus.$off('getUnitId',this.dealBusData);//組件銷燬時關閉監聽

},

還有一種問題是跳轉時通過bus傳遞會存在的問題。之前也遇到過,參考鏈接:

https://www.jianshu.com/p/fde85549e3b0

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章