Vue-全局事件总线

作者：System 时间：2024年08月14日分类：所有,vue.js 字数：715

Vue 的事件总线，即 Event Bus，是一种组件间通信的方式。它可以非常方便地实现跨组件通信。

以下是一个简单的 Vue 事件总线的示例：

首先，创建一个新的 Vue 实例作为事件总线：




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

然后，在任何组件中，你可以使用这个事件总线发送事件：




// 组件 A
import { EventBus } from './EventBus.js';
 
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('someEvent', 'Hello, Event Bus!');
    }
  }
}

接收事件：




// 组件 B
import { EventBus } from './EventBus.js';
 
export default {
  created() {
    EventBus.$on('someEvent', (message) => {
      console.log(message);
    });
  },
  beforeDestroy() {
    EventBus.$off('someEvent');
  }
}

记得在组件销毁时移除事件监听器，以避免潜在的内存泄漏。

Vue-全局事件总线

评论已关闭

推荐阅读