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踩坑的资料请关注脚本之家其它相关文章！