在Vue 2中，事件总线（Event Bus）是一种跨组件通信的常用方法，尤其是在组件之间没有直接父子关系时。事件总线本质上是一个空的Vue实例，用于触发和监听事件。这里将给出一个简单的Vue 2事件总线示例。 [TOC] ### 步骤 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) }) ```