解决vue事件总线$on中获取不到组件实例

在使用vue事件总线执行$emit("someEvent") 时,事件总线$on回调函数中this.$refs.someComponent报错,提示someComponent组件不存在。

原因是在组件切换时someComponent已销毁 ,但是对应的事件监听还存在,导致后来emit到了历史包含已销毁组件的事件函数。

解决方法是在使用事件总线时及时在组件beforeDestroy(销毁),同时清除掉对应注册的事件 eventBus.$off('someEvent')

 mounted () {
   eventBus.$on('someEvent', () => { //执行someComponent中的doAddList
     this.$refs.someComponent.doAddList(...);
   });
 },
 beforeDestroy () {
   eventBus.$off('someEvent')
 },

你可能感兴趣的:(前端vue.js)