event-bus使用方法

1.定义event-bus组件实例

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

2.定义两个组件A、组件B，分别设置EventBus.on、 EventBus.$off
组件A

<template>
  <div class="boats">
    我是驾驶舱
    <el-button @click="release">发布消息</el-button>
  </div>
</template>

<script>
import { EventBus } from '@/plugins/event-bus'
export default {
  methods: {
    release() {
      // 这个是对在页面上的已展示组件的发布影响
      EventBus.$emit('platform1', 'wangwu')
    }
  },
  destroyed() {
    // 这个是对组件B（暂时未展示组件）起作用的发布影响
    EventBus.$emit('platform1', 'wangwu1')
  }
}
</script>

<style scoped></style>

组件B

<template>
  <div class="data-analyse">我是数据分析{{ 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使用注意事项

event-bus的核心是发布订阅模式，要求订阅者要能获取到发布的信息，必须在发布前已经注册，否则无法获取到发布的信息

event-bus在vue中的使用分两种情况，具体为：

1.组件A、组件B同时展示页面，这时可以通过写在methods中的事件发布信息，订阅组件B通过写在created中订阅收到信息。
2.需先关闭组件A再打开组件B，组件B获得信息，这时需要注意的是vue组件销毁与生成的生命周期，即先创建组件B，在mouted前destroy组件A， 这是可以通过写在destroy中发布信息，订阅组件B通过写在created中收到信息。