如何在 Vue 3 中设置全局事件总线

Question

我正在创建一个 Vue 3 应用程序并尝试为两个组件实现全局事件总线以进行通信。过去 w/Vue 2 我会做以下事情：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
export const bus = new Vue();
new Vue({
  render: h => h(App),
}).$mount('#app')

现在 w/Vue 3 我知道新的 Vue 出来了，createApp() 进来了。因此我将总线设置为：

// main.js
import { createApp } from "vue";
import App from "./App.vue";

export const bus = createApp();

createApp(App).mount("#app");

而App.vue是：

<template>
  <!-- ============== Modal Component ============= -->
  <FormModal v-show="isModalVisible" @close="closeModal">
    <template v-slot:header> Add Equipment Item to Scrap List </template>
  </FormModal>

 
    <!-- More template stuff -->

  <DisplayScrap />
</template>

<script setup>
import { ref } from "vue";
import FormModal from "./components/form-modal.vue";
import DisplayScrap from "./components/display-scrap.vue";

现在，当我转到第一个组件（发射器）并尝试导入全局总线时：

// form.modal.vue
import { reactive, defineEmits, ref, toRaw } from "vue";
import addRow from "../helperFunctions/addRow.js";
import { bus } from "../main.js";

我现在在以下的控制台中收到错误消息：

Uncaught ReferenceError: 初始化前无法访问词法声明 'App' http://localhost:3000/src/main.js?t=1640126294730:7 main.js:7:1

非常感谢任何关于在 Vue 3 中设置全局总线的正确方法的建议。我是否遗漏了一些导致错误的循环引用？对于这种情况，我在文档中没有看到任何示例...

Answer 1

首先是错误：

您是否尝试 export const bus = createApp(); 在不同的文件中以避免循环引用？
关于vue3中的全局总线：

建议使用 vuex 提供的全局状态或任何外部包作为组件之间通信的最佳实践。

即使您设法导入创建的 bus，您仍然没有侦听器 $on 来接收发出的数据。因为他们在 vue3
中删除了它

如何在 Vue 3 中设置全局事件总线

How to setup a Global Event bus in Vue 3

vuejs3