vue组件中传值EventBus的使用及注意事项

Posted 2020-11-29 qiufang

主要想说下非父子组件之间的通信。

项目场景：在app.vue里写了一个公共的顶部导航navbar，然后右侧有个分享按钮，而这个分享按钮只有在特定的页面才展示，项目里是在lottery.vue页面，然后想实现app.vue里点击分享按钮，触发lottery.vue里的分享方法。

解决：使用eventBus

1、创建一个event-bus.js

import Vue from ‘vue‘

export const EventBus = new Vue()

2、在app.vue引入eventbus，点击分享按钮时触发方法

import { EventBus } from ‘@/tools/event-bus‘

onClickRight () {
    EventBus.$emit(‘handleLotteryShare‘)
}

3、在lottery.vue引入eventBus，在mounted里监听

 import { EventBus } from ‘@/tools/event-bus‘

 mounted () {
    EventBus.$on(‘handleLotteryShare‘, () => {
      this.doShare()
    })
  },

4、到此解决了。但是，但是，出bug了，每多点击一次，分享的弹窗的蒙层颜色就更深一层。然后一头雾水，以为是原生app里api的bug，跑去问他们，结果尴尬了，并不是，而是调了多次分享接口。

然后就发现应该跟eventBus有关，上网搜索了下，原来eventBus用完要记得解绑。加上以下代码解决了。

 created () {
    // 解绑bus
    EventBus.$off(‘handleLotteryShare‘)
}

 

使用eventBus注意事项：要记得解绑啊！EventBus.$off(‘handleLotteryShare‘)。