vue3 事件总线 $on $emit

Vue 3 中事件总线的实现与 Vue 2 中的略有不同，Vue 3 中使用了一个新的 API `createApp` 来创建应用实例，并且将事件总线的实现抽象成了一个单独的模块 `mitt`。

要使用事件总线，在组件中需要先导入 `mitt` 模块：

import mitt from 'mitt';

然后在组件中创建一个事件总线实例：

const emitter = mitt();

在需要向其他组件中发送事件的地方，可以使用 `$emit` 方法：

emitter.emit('eventName', data);

在需要监听事件的组件中，可以使用 `$on` 方法来监听事件：

emitter.on('eventName', (data) => {
  // 处理事件
});

需要注意的是，事件总线是一个全局实例，可以在不同的组件中使用。但是在使用时，需要先导入 `mitt` 模块并创建一个新的实例。

相关问题

vue $emit $on

在Vue中，$emit和$on是用于实现组件间通信的两个方法。

$emit方法用于在当前实例上触发自定义事件。它可以接收一个事件名称作为第一个参数，以及可选的附加参数。例如，通过调用`this.$emit('test', 'Hello')`来触发名为"test"的自定义事件，并传递字符串"Hello"作为参数。

$on方法用于监听当前实例上的自定义事件。它接收两个参数，第一个参数是事件名称，第二个参数是一个回调函数。当触发该事件时，回调函数会被执行，并接收所有传入事件触发函数的额外参数。例如，通过调用`this.$on('test', function(msg){ console.log(msg) })`来监听名为"test"的自定义事件，并在事件触发时打印出传递的参数。

在给定的代码示例中，`this.$EventBus`是一个在Vue原型上注册的全局事件总线对象。通过将事件总线对象分配给`Vue.prototype.$EventBus`，我们可以在不同的组件中访问和使用它。其中，`new Vue()`创建了一个Vue实例并将事件总线对象赋值给`$EventBus`。然后，我们可以在组件中使用`this.$EventBus.$emit()`触发自定义事件，以及使用`this.$EventBus.$on()`监听自定义事件。

在header组件中，通过在created生命周期钩子函数中使用`this.$EventBus.$on()`方法监听名为"changeNum"的自定义事件。当"changeNum"事件被触发时，回调函数会执行，并将传递的参数赋值给headStr属性，从而更新组件中的显示内容。

vue2全局事件总线$bus

Vue 2 中的全局事件总线 $bus 是一种用于在组件之间进行通信的机制。它基于 Vue 实例的事件系统，在任何地方都可以使用。

要使用 $bus，您需要创建一个新的 Vue 实例并将其作为全局事件总线。在创建这个实例后，您可以使用 $emit 方法触发一个事件，然后使用 $on 方法在其他组件中监听该事件。

下面是一个使用 $bus 的示例：

// main.js