vue.js - Global EventBus 在组件之间传递数据不起作用

Question

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

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

我可能做错了什么？

插件.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'});                  
    },
  },

登录.vue：

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

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

登录.vue：

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

Answer 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)
}