Vue事件總線（eventBus）$on()會多次觸發解決辦法
阿新 • • 發佈：2018-11-16
off cti UNC 關於 span sea col on() for
其中可能會遇到一個坑是$on()會觸發多次，具體原因跟生命周期有關，詳細分析可參考：
https://blog.csdn.net/chern1992/article/details/80392465
項目中使用了事件總線eventBus來進行兩個組件間的通信，
使用方法是是建立eventBus.js文件，暴露一個空的Vue實例，如下：
import Vue from ‘vue‘
export default new Vue();
在需要通信的兩個組件中分別import
import bus from "common/utils/eventBus";
然後就可以通過emit、on進行通信：如下：
一個組件中發射
bus.$emit(‘SUBMITSEARCH_PEOPLE‘,this.searchContent)
另一個組件中接收
bus.$on(‘SUBMITSEARCH_PEOPLE‘, function (data) {...}
其中可能會遇到一個坑是$on()會觸發多次，具體原因跟生命周期有關，詳細分析可參考：
https://blog.csdn.net/chern1992/article/details/80392465
解決辦法就是在利用$on 接收事件的組件的beforeDestroy或destroy周期中將事件進行銷毀，使用$off()
beforeDestroy () {
bus.$off(‘SUBMITSEARCH_PEOPLE‘)
},
附上github上Vue作者尤大大關於這問題的解答：
https://github.com/vuejs/vue/issues/3399
Vue事件總線（eventBus）$on()會多次觸發解決辦法