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() hook

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

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

Answer 1

试试这个对我有用。单击按钮时，数据将显示在控制台中。
这是 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>

Answer 2

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

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

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

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

demo

vue eventbus - $on 不会触发总线

vue eventbus - $on wont trigger the bus

vue.js

event-bus