写在前面

记录一下自己使用vue踩过的坑，希望别人看到能避免如此踩坑。
先描述问题：
假设有两个非父子组件A和组件B，组件A的data中绑定的某个值变化时，通知组件B需要做某些操作，代码如下：

1
2
3
// 组件A
this.value = 1
eventBus.$emit('getSomething', this.value)
1
2
3
4
5
6
// 组件B
created() {
	eventBus.$on('getSomething', val => {
		console.log(val)
	})
}

我们会发现，当组件A已经触发了事件getSomething的时候，第一次切换到组件B时，控制台会打印一次value的值，也就是1；但是当第二次切换到组件B时，会打印两次1，第三次会打印三次，如此累加，这样就会导致很多问题。

解决方法：
法一：在每次$on之前调用$off卸载掉事件，如下：

1
2
3
4
5
6
7
// 组件B
created() {
	eventBus.$off('getSomething')
	eventBus.$on('getSomething', val => {
		console.log(val)
	})
}

法二：在生命周期beforeDestroy里面调用$off卸载掉事件

1
2
3
4
// 组件B
beforeDestroy() {
	eventBus.$off('getSomething')
}

如果你有更好的解决方法，欢迎留言探讨。