vue2 事件总线。 跨组件方法调用。跨组件改变数据，跨组件执行方法

在Vue 2中，事件总线（Event Bus）是一种跨组件通信的常用方法，尤其是在组件之间没有直接父子关系时。事件总线本质上是一个空的Vue实例，用于触发和监听事件。这里将给出一个简单的Vue 2事件总线示例。

步骤 1: 创建事件总线

首先，你需要创建一个事件总线实例。通常，你会在一个单独的文件中做这个操作，比如 eventBus.js。

eventBus.js

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

这个文件导出了一个新的Vue实例，我们将使用这个实例来触发和监听事件。

步骤 2: 触发事件

在Vue组件中，你可以使用$emit方法通过事件总线来触发事件。例如，假设我们有一个组件ComponentA，它需要在某个时刻通知其他组件。

ComponentA.vue

<template>  
  <button @click="sendMessage">Send Message</button>  
</template>  
<script>  
// 引入事件总线  
import { EventBus } from './eventBus.js';  
// 注入引入的路径，类似这样的引入方式也可以
//import { EventBus } from '@/utils/eventBus.js';  
export default {  
  methods: {  
    sendMessage() {  
      // 触发事件，传递一些数据  
      EventBus.$emit('message-event', 'Hello from Component A!');  
    }  
  }  
}  
</script>

步骤 3: 监听事件

在另一个组件中，你可以使用$on方法通过事件总线来监听该事件。假设我们有一个组件ComponentB，它想要接收ComponentA发送的消息。

ComponentB.vue

<template>  
  <div>{{ message }}</div>  
</template>  
<script>  
// 引入事件总线  
import { EventBus } from './eventBus.js';  
export default {  
  data() {  
    return {  
      message: ''  
    }  
  },  
  created() {  
    // 监听事件  
    EventBus.$on('message-event', (msg) => {  
      this.message = msg;  
    });  
  },  
  beforeDestroy() {  
    // 组件销毁前，移除事件监听器  
    EventBus.$off('message-event');  
  }  
}  
</script>

在ComponentB中，我们在created生命周期钩子中监听message-event事件，并在接收到消息时更新message数据属性。同时，在beforeDestroy钩子中，我们使用$off方法来移除事件监听器，这是一个好习惯，可以防止内存泄漏。

注意事项

虽然事件总线在Vue 2中是一个流行的跨组件通信方法，但在Vue 3中，推荐使用Vuex、Provide/Inject或Vue 3的Composition API（如mitt库）等更现代和更易于管理的状态管理或通信方法。此外，如果滥用事件总线，可能会导致事件监听器管理变得混乱，因此请慎重使用。

也可以注册在全局中去使用

安装全局事件总线

var vm = new Vue({
  el: '#app',
  router,
  store,
  mixins: [{
    methods: {
      exportExcel(domId, fileName, ignoreFormatColumns) {
        handleExport(domId, fileName, ignoreFormatColumns)
      }
    }
  }],
  beforeCreate() {
    Vue.prototype.$eventBus = this    // 安装全局事件总线
  },
  render: h => h(App)
})

触发事件就可以这样使用了

 this.$eventBus.$emit('msgQueryLevelChange', _msgQueryLevel)

监听事件这样使用

const my = this
this.$eventBus.$on('msgQueryLevelChange', function(_msgQueryLevel) {
  console.log('组件事件被触发了.......重新执行刷新数据', _msgQueryLevel)
  my.jumpQuery(_msgQueryLevel)
  my.getMessage(1, my.isReadTag)
})