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踩坑的资料请关注脚本之家其它相关文章！
相关文章
vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Vue 展示.md文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
国际化是设计软件应用的过程中应用被使用与不同语言和地区,下面这篇文章主要给大家介绍了关于网站国际化多语言处理工具i18n安装使用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-09-09
本文介绍了vue 项目常用加载器及配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章给大家分享了基于vue实现一个简单的MVVM框架的相关内容，有需要的朋友们可以参考学习下。2018-08-08
这篇文章主要为大家详细介绍了vue组件父子间通信之综合练习聊天室制作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了Vue生命周期中的组件化，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
Vue 3.0 前瞻Vue Function API新特性体验
这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
Vue中使用 ElementUi 的 el-select 实现全选功能(思路详解
在开发中,有一个需求是 选项组件中使用到一个 全选的功能,特在这记录下实现的方法,方便后续的查阅,以及方便大家查阅借鉴,对vue ElementUi 全选功能感兴趣的朋友一起看看吧2024-02-02
本篇文章主要介绍了在基于vue-cli的项目自定义打包环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论