Question

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

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

我可能做错了什么？

plugins.js：

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

ChangePassword.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;
    },

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

在组件之间传递数据的全局EventBus不起作用

1 个答案: