问题描述
问题背景:A页面跳转到B页面,并传参过去,但是第一次跳转过去不会触发$on事件,第二次能触发但是触发了两次,后面每点一次就会比之前多触发一次
- A 组件关键代码:
methods: {
onSearch() {// 给按钮绑定的一个点击事件
Bus.$emit('onclick',"ccc")
this.$router.push('/data-list'); // 跳转到B页面
},
}
- B 组件关键代码:
created() {
console.log('B页面的 created 触发了');
Bus.$on('onclick', msg => {
console.log('获取到的参数', msg); // 首次无打印
});
}
- 首次跳转过去
Bus.$on
里面的打印并没有触发
解决方法
在已经用到 vue-router 并且需要跨组件传值的情境,最好还是用 vuex,当然用 eventbus 也有解决方法:
- 在
destroyed
或beforeDestroy
其中一个生命周期钩子中去绑定Bus.$emit
destroyed() {
Bus.$emit('someThing',"ccc")
},
beforeDestroy() {
Bus.$emit('someThing',"ccc")
},
- 然后再去使用:
created() {
console.log('B页面的 created 触发了');
Bus.$on('onclick', msg => {
console.log('获取到的参数', msg); // 'ccc'
});
}
- 因为 vue-router 切换会是,先加载新的组件,等新的组件渲染好但是还没挂载前,销毁旧组件,再挂载新组件。
1. 新组件: beforeCreate
2. 新组件: created
3. 新组件: beforeMount
4. 旧组件: beforeDestroy
5. 旧组件: destroy
6. 新组件: mounted