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

Question

我正在创建一个 Vue 3 应用程序并尝试为两个组件实现一个全局事件总线以进行通信。过去使用 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')

现在有了 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";

我现在在控制台中遇到错误：

未捕获的 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中删除了它