Global EventBus 在组件之间传递数据不起作用答案

【问题标题】：Global EventBus to pass data between components does not workGlobal EventBus 在组件之间传递数据不起作用
【发布时间】：2020-04-01 14:45:10
【问题描述】：

我正在尝试在 VueJs 中使用全局事件总线，但到目前为止还没有成功。

我有以下代码。当我从 ResetPassword 导航到登录屏幕时，我应该会看到带有 Your password has been changed successfully. Please login to continue 的 successMessage，但它始终显示为空白。

我做错了什么？

plugins.js：

Vue.prototype.$eventHub = new Vue();

更改密码.vue：

methods: 
  {  
    ChangePassword() 
    {
      this.$eventHub.$emit('navigation-message', 'Your password has been changed successfully. Please login to continue.');
      this.$router.push({ name: 'login'});                  
    },
  },

Login.vue：

data() {
    return {
      successMessage:'',
    };
  },
    created () 
      {
        this.$eventHub.$once('navigation-message', this.successMessage);
      },
      beforeDestroy() 
      {
        this.$eventHub.$off('navigation-message');
      },

更新：12/8/2019：我根据@tony19 的评论更改了 login.vue，但问题仍然存在。

Login.vue：

created () 
  {
    this.$eventHub.$once('navigation-message', (payload)=>
    {
      updateSuccessMessage(payload);    
    });
  },
methods: 
  { 
    updateSuccessMessage(payload) 
    {
      this.successMessage=payload;
    },

【问题讨论】：

this.$eventHub.$once('navigation-message', this.successMessage); 看起来不对。第二个参数应该是一个函数，但是你已经将它设置为successMessage，它是一个字符串。
@tony19，我做了更改，但问题仍然存在。
触发事件时是否存在Login 页面？如果您的更改密码视图与登录视图是分开的，那么在您推送路由之前可能不会创建它，此时事件侦听器设置为时已晚。我猜这就是正在发生的事情。
感谢@tony19 的意见。我在 vuejs 论坛上得到了相同的输入。 forum.vuejs.org/t/global-eventbus-not-working/81641

标签： vue.js vue-events

【解决方案1】：

您需要添加this.

created () {
  this.$eventHub.$on('navigation-message', payload => {
    this.updateSuccessMessage(payload) 
  })
},
methods: {
  updateSuccessMessage(payload) {
    this.successMessage = payload
  }
}

还要确保您实际上是在全局导入 plugin.js（例如，在您导入 Vue 的主文件中）并确保您的组件可以访问它。

试试这个：

created() {
  console.log(this.$eventHub)
}

【讨论】：