vue中 this.$eventHub.$emit 的用法

在 Vue 中，`this.$eventHub.$emit` 是一种通过事件总线进行跨组件通信的方式。通常情况下，我们可以通过创建一个事件总线实例，并将其挂载到 Vue 实例的原型上，以便在整个应用程序中访问。下面是一种常见的用法示例：

1. 创建事件总线实例并挂载到 Vue 实例的原型上：

// main.js
import Vue from 'vue';

Vue.prototype.$eventHub = new Vue();

2. 在发送方组件中使用 `$emit` 方法触发事件：

// SenderComponent.vue
export default {
  methods: {
    sendData() {
      this.$eventHub.$emit('custom-event', data);
    }
  }
}

3. 在接收方组件中使用 `$on` 方法监听事件：

// ReceiverComponent.vue
export default {
  created() {
    this.$eventHub.$on('custom-event', this.handleEvent);
  },
  destroyed() {
    this.$eventHub.$off('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理接收到的事件数据
    }
  }
}

通过使用 `$emit` 方法触发事件，在其他组件中使用 `$on` 方法进行事件监听，就可以实现跨组件通信。需要注意的是，在不需要监听事件时，记得使用 `$off` 方法取消事件监听，以避免内存泄漏。