event-bus使用方法

1.定義event-bus組件實(shí)例

import Vue from 'vue'
export const EventBus = new Vue()

2.定義兩個(gè)組件A、組件B，分別設(shè)置EventBus.on、 EventBus.$off
組件A

<template>
  <div class="boats">
    我是駕駛艙
    <el-button @click="release">發(fā)布消息</el-button>
  </div>
</template>

<script>
import { EventBus } from '@/plugins/event-bus'
export default {
  methods: {
    release() {
      // 這個(gè)是對在頁面上的已展示組件的發(fā)布影響
      EventBus.$emit('platform1', 'wangwu')
    }
  },
  destroyed() {
    // 這個(gè)是對組件B（暫時(shí)未展示組件）起作用的發(fā)布影響
    EventBus.$emit('platform1', 'wangwu1')
  }
}
</script>

<style scoped></style>

組件B

<template>
  <div class="data-analyse">我是數(shù)據(jù)分析{{ name }}</div>
</template>

<script>
import { EventBus } from '@/plugins/event-bus'
export default {
  data() {
    return {
      name: ''
    }
  },
  created() {
    const _this = this
    EventBus.$on('platform1', function (res) {
      _this.name = res
    })
  },
  destroyed() {
    EventBus.$off('platform1')
  }
}
</script>

<style scoped></style>

event-bus使用注意事項(xiàng)

event-bus的核心是發(fā)布訂閱模式，要求訂閱者要能獲取到發(fā)布的信息，必須在發(fā)布前已經(jīng)注冊，否則無法獲取到發(fā)布的信息

event-bus在vue中的使用分兩種情況，具體為：

1.組件A、組件B同時(shí)展示頁面，這時(shí)可以通過寫在methods中的事件發(fā)布信息，訂閱組件B通過寫在created中訂閱收到信息。
2.需先關(guān)閉組件A再打開組件B，組件B獲得信息，這時(shí)需要注意的是vue組件銷毀與生成的生命周期，即先創(chuàng)建組件B，在mouted前destroy組件A， 這是可以通過寫在destroy中發(fā)布信息，訂閱組件B通過寫在created中收到信息。