vue 全局事件(eventBus)設定

引言

做項目的時候需要，選擇日期後觸發各個頁面去擷取資料，但日期和頁面之間無父子關系，無法使用父子元件之前事件的事件的觸發，是以就用到了全局事件的綁定與觸發

使用

main.js中的設定

new Vue({
      router,
      store,
      render: h => h(App),
      data: {
        eventHub: new Vue()
      }
    }).$mount('#app')
           

觸發

我想要做的是在月曆元件選擇事件後，觸發首頁/詳情頁去擷取資料，是以在事件元件裡cilck事件裡設定emit，因為我把時間存到store裡了，是以不需要傳參

confirmDate (date) {
      this.$root.eventHub.$emit('changeDate', null)
    },
           

綁定

在需要被觸發事件的頁面的mouted裡進行綁定, 第二個參數是回調函數，被觸發後執行第二個參數的方法，注意方法不要加（）

mounted () {
    this.$root.eventHub.$on('changeDate', this.getHeadData)
  },
           

如果多處頁面綁定該事件，要在銷毀該頁面時接觸綁定，要不然在其他頁面也觸發了該頁面的事件

beforeDestroy () {
    this.$root.eventHub.$off('changeDate')
  },
           

我之前就是因為沒接觸綁定，觸發了多次事件