vue2使用eventbus踩坑解决
更新时间：2023年06月30日 09:33:49 作者：Skywang
这篇文章主要为大家介绍了vue2使用eventbus踩坑解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。
而两个毫不相关的界面通讯我们又可以用到vuex和今天要说的eventbus，本文就对eventbus使用时遇到的问题以及怎么处理做说明，至于怎么使用就不过多赘述了。
问题1：
页面A使用emit为什么第一次进入B的时候页面B中的on事件没有被触发
这就涉及到vue的生命周期问题了，如果A的emit方法写在了跳转方法里这时候B界面其实还没有创建，这时候通知是触发不了B的on事件。
至于怎么解决问题，其实看下面的图片大家就清楚了。
所以，我们可以把A页面组件中的emit事件写在beforeDestory中去。
因为这个时候，B页面组件已经被created了，也就是我们写的on事件已经触发了。
所以可以，在beforeDestory的时候，emit事件。
A界面
// 跳转界面的方法
editList (index, date, item) {
// 点击进入编辑的页面，需要传递的参数比较多。
this.$router.replace({path: '/B'})
}
// bus通知的方法
beforeDestroy () {
bus.$emit('get', { name:'A'})
}
B界面
// bus通知的方法
create() {
bus.$on('get', (data)=>{
})
}这个问题就解决了
问题2：
为什么后面再一次依次去触发的时候会出现，每一次都会发现好像之前的on事件分发都没有被撤销一样，导致每一次的事件触发执行越来越多。
这就是因为bus的on事件是不会自动清楚销毁的，需要我们手动来销毁。
// 在B组件页面中添加以下语句，在组件beforeDestory的时候销毁。
beforeDestroy () {
bus.$off('get', ()=>{})
}以上就是vue2使用eventbus踩坑解决的详细内容，更多关于vue2 eventbus踩坑的资料请关注脚本之家其它相关文章！
相关文章
ant design vue动态循环生成表单以及自定义校验规则详解
这篇文章主要介绍了ant design vue动态循环生成表单以及自定义校验规则详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了解决VUEX刷新的时候出现数据消失,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家详细介绍了vue实现文章点赞和差评功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文主要介绍了vue3中使用jsx的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
这篇文章主要介绍了Vue 实现从小到大的横向滑动效果,结合实例形式详细分析了vue.js横向渐变滑动效果的实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了有关vue 组件切换,动态组件,组件缓存，在组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来,达到预期效果，下面来看看文章的详细内容2021-11-11
这篇文章主要介绍了vue mixins组件复用的几种方式（小结）,vue中提供了一种混合机制mixins，用来更高效的实现组件内容的复用,有兴趣的可以了解一下2017-09-09
这篇文章主要介绍了在vue中高德地图引入和轨迹的绘制的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue源码探究之虚拟节点的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要介绍了VUE 实现动态给对象增加属性，并触发视图更新操作,涉及vue.js对象属性动态操作及视图更新相关实现技巧,需要的朋友可以参考下2019-11-11
最新评论