vue組件中傳值EventBus的使用及注意事項

主要想說下非父子組件之間的通信。

項目場景：在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')。