vue3全局事件总线使用

在Vue 3中，全局事件总线的实现方式与Vue 2有所不同。Vue 3推荐使用`mitt`库来实现全局事件总线的功能。下面是使用Vue 3和`mitt`库实现全局事件总线的示例：

首先，安装`mitt`库：

npm install mitt

然后，在你的Vue应用程序的入口文件（通常是`main.js`）中，设置全局事件总线：

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

const app = createApp(App);

// 创建一个事件总线实例
const eventBus = mitt();

// 将事件总线实例挂载到Vue应用的全局属性中
app.config.globalProperties.$bus = eventBus;

app.mount('#app');

现在，你可以在任何组件中通过`this.$bus`来访问全局事件总线，并使用它来触发和监听事件。

在发送方组件中触发事件：

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.emit('message', 'Hello, EventBus!');
    }
  }
}
</script>

在接收方组件中监听事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$bus.on('message', (text) => {
      this.message = text;
    });
  }
}
</script>

在接收方组件的`mounted`钩子函数中，我们使用`this.$bus.on`方法来监听名为`message`的事件，并在事件触发时更新组件的`message`数据。

这样，当发送方组件点击按钮时，会触发`message`事件，并传递消息内容给接收方组件，接收方组件会更新界面上的文本。这就完成了全局事件的传递与监听。