javascript - Vue 事件从父组件 (App.vue) 到另一个组件

Question

我想从 App.vue 发出一个事件，它是另一个组件的主要组件。App.vue 中的 EventBus.$emit，子/另一个组件上的 EventBus.$on 不起作用。由于它们之间没有直接的子关系，因此我也不能使用 @custom-event=""

如何将事件从 App.vue 抛出到另一个组件？

这就是我所做的。它正在运行所有其他组件。这是我的组件的文件夹结构

-src
-pages
  -main-page
    -MainPage.vue  $on
-event
-constant
-store
-router
App.vue  --> $emit
main.js

Answer 1

你说 EventBus 方法不起作用，但它应该起作用，所以我假设你做错了。做这样的事情:

创建eventBus.js

import Vue from 'vue';
export const EventBus = new Vue();

在任何单个文件组件中，导入它:

import { EventBus } from '/src/path/to/eventBus.js';

在组件中触发事件:

EventBus.$emit('some-event-raised', { someData: "bob" })

在任何其他组件中，再次导入然后监听:

EventBus.$on('some-event-raised', obj => {
  console.log(`some-event-raised triggered [${obj.someData}]`)
});