如何使用事件总线从其他文件中调用方法

Question

在CreateEntryStepper.vue中，我有一个按钮，希望在按下该按钮时调用在CreateEntryStepperImageUpload.vue中激活的函数

我知道我必须使用事件总线，但我真的不知道我需要传递什么以及如何使它们工作

bus.js仅有

import Vue from "vue";

export const bus = new Vue();

CreateEntryStepper.vue（不确定在此处发出什么内容）

import { bus } from "@/components/wizard/bus.js";

    async submitEntry() {

      this.$Progress.start();
      bus.$emit();

CreateEntryStepperImageUpload.vue（saveImage是我要调用的方法）

import { bus } from "@/components/wizard/bus.js";

不确定将其放置在何处

    bus.$on()

    async saveImage() {

现在我需要的是我发出的是什么？以及如何使该按钮按下时调用saveImage

Answer 1

您发出事件的名称，可以是您想要的任何名称。例如：bus.$emit('upload-image');，然后您侦听此事件并使用以下命令触发回调：

bus.$on('upload-image', () => {
  saveImage
    .then(/* Do stuff */)
    .catch(/* Do stuff */);
});`

有关自定义事件如何工作的更多信息，请参阅文档：https://vuejs.org/v2/guide/components-custom-events.html