vue中eventbus被多次觸發(vue中使用eventbus踩過的坑)【bus.$on事件被多次綁定】


 

問題描述:只要頁面沒有強制刷新,存在組件切換,bus.$on方法會被多次綁定,造成事件多次觸發

 
觸發bus.$on中綁定的方法.png
 
bus.$on多次綁定.png

解決辦法:在每次調用方法前先解綁事件( bus.$off ),然后在重新綁定( bus.$on )

 bus.$off("backUpLevel"); bus.$on('backUpLevel', () => { if(self.ONION.length <= 1){ self.jumpSubDir() }else{ let len = self.ONION.length-1 self.jumpTeamId(self.ONION[len].id,self.ONION[len].name,self.ONION[len].type) } }) 
 
每次綁定前解綁bus.$on方法.png

解決:
看一下github上提出的。issue
https://github.com/vuejs/vue/issues/3399

 
image.png

尤大大提出了以下解決:

 
image.png

*就是說,這個$on事件是不會自動清楚銷毀的,需要我們手動來銷毀。(不過我不太清楚這里的external bus 是什么意思,有大神能解答一下的嗎,尤大大也提到如果是注冊的是external bus 的時候需要清除)****

所以。我在B組件頁面中添加Bus.$off來關閉。代碼如下:

// 在B組件頁面中添加以下語句,在組件beforeDestory的時候銷毀。 beforeDestroy () { bus.$off('get', this.myhandle) }, 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM