Vue3中事件总线的具体使用

事件总线是 Vue 的一个重要功能，可实现在不同组件间传递数据和通知。在 Vue3 中，官方推荐使用新的 APIs 来实现事件总线。具体实现方式如下：

创建事件总线

Vue3 中通过创建一个具有事件派发功能的实例来实现事件总线功能。我们可以使用 createApp 函数创建一个实例：

import { createApp } from 'vue';
const app = createApp({});

使用 provide 和 inject 传递事件总线实例

在 Vue3 中，我们可以使用 provide 和 inject 为所有后代组件注入事件总线实例。provide 可以设置一个任意的值，而 inject 可以接收这个值。具体实现方式如下：

import { provide, inject } from 'vue';
const app = createApp({});
app.provide('bus', new Vue());

在组件中引用该实例：

const bus = inject('bus');

发布事件和监听事件

在 Vue3 中，我们可以通过事件总线实例的 $emit 方法来发布事件，通过 $on 方法来监听事件。具体实现方式如下：

// 发布事件
bus.$emit('eventName', eventData);

// 监听事件
bus.$on('eventName', (eventData) => {
  // 处理事件数据
})

示范举例

首先，我们在 main.js 中创建事件总线实例，并使用 provide 注册：

import { createApp } from 'vue';
import { provide } from 'vue';

const app = createApp(App);
const bus = new Vue();
provide('bus', bus);
app.mount('#app');

然后，在需要使用事件总线的组件中，我们通过 import 和 inject 引用该实例：

import { inject } from 'vue';
export default {
  name: 'Demo',
  setup() {
    const bus = inject('bus');
    const handleClick = () => {
      // 发布事件
      bus.$emit('eventName', 'Hello World');
    }

    // 监听事件
    bus.$on('eventName', (data) => {
      console.log(data); // 输出 "Hello World"
    })

    return {
      handleClick,
    }
  },
}

以上就是使用 Vue3 创建和使用事件总线的攻略，通过 provide 和 inject 实现了事件总线实例的共享，通过 $emit 和 $on 实现了事件的发布和监听。通过这种方式，我们可以在不同组件中方便地传递和处理数据和通知。