从父级 (App.vue) 到另一个组件的 Vue 事件

Question

我想从 App.vue 发出一个事件，它是另一个组件的主要组件。 App.vue 中的 EventBus.$emit、child/another 组件上的 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}]`)
});

Vue Event from Parent (App.vue) To Another Component