Vue 中如何实现全局事件总线？

前言

在 Vue 项目中，有时需要在组件之间传递数据或进行交互，而这些组件之间可能没有父子或兄弟关系。这时候我们就可以使用全局事件总线来实现组件间数据传递或交互。本文将介绍如何在 Vue 中实现全局事件总线。

一、什么是全局事件总线

在 Vue 中，任何一个组件都可以触发和监听事件。如果我们需要在组件之间进行数据传递或交互，就可以使用全局事件总线。

全局事件总线是一个 Vue 实例，它用于事件的触发和监听，可以在任何组件中触发和监听事件。

在全局事件总线中，每个事件都有一个名称和一个回调函数。当事件被触发时，回调函数就会被执行。这样就可以完成组件间数据传递和交互。

二、如何实现全局事件总线

在 Vue 中有多种方式实现全局事件总线，本文将介绍两种常用的方法。

1. 利用 new Vue() 实例实现全局事件总线

我们可以在 main.js 文件中创建一个 Vue 实例，并将它挂载到全局变量中。这样，在任何组件中都可以访问到这个实例，并使用它来触发和监听事件。

main.js 中创建一个 Vue 实例，并将它挂载到全局变量中：

import Vue from 'vue'

Vue.prototype.$bus = new Vue()

这里我们将这个 Vue 实例挂载到 prototype 中，这样每个组件都可以访问到 $bus 变量，并且使用 $bus 来触发和监听事件。

在使用这个全局事件总线时，我们首先需要在组件中引入 Vue，并定义一个事件名称，然后使用 $bus.$emit() 来触发这个事件。在监听这个事件时，使用 $bus.$on() 函数来监听事件，并在回调函数中处理数据。

例如，在组件 A 中触发一个事件：

import Vue from 'vue'

export default {
  data () {
    return {
      message: 'hello, world!'
    }
  },
  methods: {
    onClick () {
      // 触发事件
      Vue.prototype.$bus.$emit('hello', this.message)
    }
  }
}

在组件 B 中监听这个事件：

import Vue from 'vue'

export default {
  data () {
    return {
      message: ''
    }
  },
  mounted () {
    // 监听事件
    Vue.prototype.$bus.$on('hello', message => {
      this.message = message
    })
  }
}

这个例子中，当组件 A 中触发 hello 事件时，组件 B 就会监听到这个事件，并在回调函数中将传递过来的数据 message 赋值给组件 B 的 message 变量。

2. 利用 event bus 插件实现全局事件总线

除了上面的方式外，我们也可以使用一个简单的 event bus 插件来实现全局事件总线。这种方式比较简单，只需要在需要使用的组件中引入 event bus 插件即可。

Vue.js 的官方文档提供了一个 event bus 插件的示例，可以在这里查看。这里简单介绍一下使用方法：

首先，在 src/plugins 文件夹下创建 event-bus.js 文件，并将以下代码添加到文件中：

import Vue from 'vue'

const EventBus = new Vue()

export default EventBus

这里创建了一个 EventBus 对象，并使用 export 暴露出来，以便可以在组件中引用它。

在需要使用 event bus 的组件中，引入 event bus 并定义一个事件名称。使用 EventBus.$emit() 来触发这个事件。监听事件时，使用 EventBus.$on() 函数来监听事件，并在回调函数中处理数据。

例如，在组件 A 中触发一个事件：

import EventBus from '@/plugins/event-bus'

export default {
  data () {
    return {
      message: 'hello, world!'
    }
  },
  methods: {
    onClick () {
      // 触发事件
      EventBus.$emit('hello', this.message)
    }
  }
}

在组件 B 中监听这个事件：

import EventBus from '@/plugins/event-bus'

export default {
  data () {
    return {
      message: ''
    }
  },
  mounted () {
    // 监听事件
    EventBus.$on('hello', message => {
      this.message = message
    })
  }
}

这个例子中，当组件 A 中触发 hello 事件时，组件 B 就会监听到这个事件，并在回调函数中将传递过来的数据 message 赋值给组件 B 的 message 变量。

总结

在 Vue 中实现全局事件总线比较简单。我们可以利用 new Vue() 实例或 event bus 插件来实现。无论哪种方式，我们只需要在需要使用的组件中引入实例或插件，在组件中定义事件名称，并使用对应的函数来触发和监听事件即可完成组件间的交互和数据传递。