vue eventbus - $on 不会触发总线

Question

我查看了教程并阅读了论文，但我不明白为什么我的 eventbus 设置不起作用。

在 main.js 中 我创建了一个新的 Vue 实例

/* create a eventbus*/
export const Bus = new Vue();

在第1页

import { Bus } from "../main";

然后我有一个触发方法的点击事件

methods: {
    moveData(inValue) {
      let valueToSend = inValue;
      console.log("valueToSend");
      console.log(valueToSend);
      Bus.$emit("emitAlbumTitle", valueToSend);
    },
  },

而console.log 告诉moveData() 方法没有任何问题。

在第 2 页。 我试着听一下busemit。

import { Bus } from "../main";
  data() {
    return {
      id: this.$route.params.idAlbum,
      photoData: [],
      albumTitle: "",
    };
  },

在created() 中尝试过，如您所见，我还有其他一些事情正在发生，比如 api 调用，但我认为这不会影响这一点。

async created() {
    try {
      this.photoData = await CallApi.getPosts(url + this.id);
      this.number = this.photoData.length;
      Bus.$on("emitAlbumTitle", (data) => {
        this.albumTitle = data;
        console.log("in the $bus");
        console.log(data);
      });
    } catch (err) {
      this.error = err.message;
    }
  },

但是 Bus.$on 中的 console.logs 中没有任何内容启动，所以 eventbus 永远不会启动？ 我也试过mounted()钩子

mounted() {
  Bus.$on("emitAlbumTitle", (data) => {
   this.albumTitle = data;
    console.log("in the $bus");
    console.log(data);
  });
},

但结果相同。 我在这里错过了什么？

Answer 1

问题是您的Receiver 组件在您单击链接之前不会创建，此时事件已经从Sender 发出。

一种解决方案是将发出的事件延迟到下一个宏tick（使用setTimeout 无延迟），因为Receiver 组件将在当前宏tick 中创建：

export default {
  methods: {
    async emitValue() {
      // wait til next macro tick
      await new Promise(r => setTimeout(r));

      EventBus.$emit("string-send", this.sendString);
    },
  }
}

demo

Answer 2

试试这对我有用的方法。单击按钮时，数据将显示在控制台中。
这是 main.js 文件。

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false
export const eventBus = new Vue();
new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

是 App.vue 文件。

<template>
  <v-app>
    <div id="app">
      {{albumTitle}}
      <br>
      <button class="primary" @click="dataSend">send</button>
    </div>
  </v-app>
</template>

<script>
import {eventBus} from '@/main'
export default {
  name: "App",

  data: () => ({
    albumTitle: null
  }),
  created(){
   eventBus.$on("emitAlbumTitle", (data) => {
     this.albumTitle = data;
      console.log("in the $bus");
      console.log(data);
    });
  },
  methods: {
    dataSend(){
      eventBus.$emit("emitAlbumTitle", "some data")
    }
  },
};
</script>