【Vue】eventbus 首次$on事件未绑定问题

问题描述

问题背景：A页面跳转到B页面，并传参过去，但是第一次跳转过去不会触发$on事件，第二次能触发但是触发了两次，后面每点一次就会比之前多触发一次

• A 组件关键代码：

methods: {
	onSearch() {// 给按钮绑定的一个点击事件
		Bus.$emit('onclick',"ccc")
		this.$router.push('/data-list'); // 跳转到B页面
	},
}
1
2
3
4
5
6

• B 组件关键代码：

created() {
	console.log('B页面的 created 触发了');
	Bus.$on('onclick', msg => {
      console.log('获取到的参数', msg);	// 首次无打印
    });
}
1
2
3
4
5
6

• 首次跳转过去Bus.$on里面的打印并没有触发
  

解决方法

在已经用到 vue-router 并且需要跨组件传值的情境，最好还是用 vuex，当然用 eventbus 也有解决方法：

• 在destroyed 或 beforeDestroy 其中一个生命周期钩子中去绑定Bus.$emit

destroyed() {
	Bus.$emit('someThing',"ccc")
},
beforeDestroy() {
	Bus.$emit('someThing',"ccc")
},
1
2
3
4
5
6

• 然后再去使用：

created() {
	console.log('B页面的 created 触发了');
	Bus.$on('onclick', msg => {
      console.log('获取到的参数', msg);	// 'ccc'
    });
}
1
2
3
4
5
6

• 因为 vue-router 切换会是，先加载新的组件，等新的组件渲染好但是还没挂载前，销毁旧组件，再挂载新组件。

1. 新组件： beforeCreate
2. 新组件： created
3. 新组件： beforeMount
4. 旧组件： beforeDestroy
5. 旧组件： destroy
6. 新组件： mounted
1
2
3
4
5
6