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 图片裁剪上传组件的实现，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-11-11
这篇文章主要给大家介绍了关于vue打包后修改配置后端IP地址、端口等信息的两种方法,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue打包具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue2项目之swiper.js 的使用,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了vue引入Excel表格插件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue props type设置多个类型，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3+Element Plus实现自定义弹窗组件的全屏功能
在现代化的前端开发中,弹窗组件是提升用户体验的重要元素,本文将介绍如何使用 Vue 3 和 Element Plus 库来创建一个具有全屏功能的自定义弹窗组件,文中通过代码示例讲解的非常详细,需要的朋友可以参考下2024-07-07
下面小编就为大家分享一篇VUE2 前端实现 静态二级省市联动选择select的示例。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue百度地图实现自定义弹框样式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论