vue bus事件总线如何手写

Vue的事件总线是一种在组件之间进行通信的机制，它允许一个组件触发事件并让其他组件监听和响应这些事件。如果你想手写一个简单的Vue事件总线，可以按照以下步骤进行：

1. 创建一个新的Vue实例作为事件总线：

// eventBus.js

import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

2. 在需要通信的组件中，导入事件总线并使用它：

// ComponentA.vue

import eventBus from './eventBus';

export default {
  methods: {
    handleClick() {
      // 触发自定义事件，并传递数据
      eventBus.$emit('customEvent', data);
    }
  }
}

3. 在需要监听事件的组件中，导入事件总线并使用它：

// ComponentB.vue

import eventBus from './eventBus';

export default {
  created() {
    // 监听自定义事件
    eventBus.$on('customEvent', this.handleCustomEvent);
  },
  destroyed() {
    // 在组件销毁时取消事件监听
    eventBus.$off('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      // 处理接收到的数据
    }
  }
}

通过以上步骤，你就可以手写一个简单的Vue事件总线。在需要通信的组件中，使用`eventBus.$emit`来触发自定义事件，并可以传递数据；在需要监听事件的组件中，使用`eventBus.$on`来监听自定义事件，并在事件触发时执行相应的处理函数。记得在组件销毁时使用`eventBus.$off`来取消事件监听，以避免内存泄漏。

请注意，手写的Vue事件总线是一个简单的实现，它没有考虑到一些高级功能，如命名空间、多个事件总线实例等。如果需要更复杂的功能，可以考虑使用第三方插件或使用Vuex进行状态管理。