Vue.js 全局事件总线

Question

我正在尝试创建一个全局事件总线，以便两个同级组件可以相互通信。我四处寻找；但是，我找不到任何有关如何实施的示例。这是我到目前为止所拥有的：

 var bus = new Vue();

Vue.component('Increment', {
  template: "#inc",
  data: function() {
   return ({count: 0})
  },
  methods: {
    increment: function(){
      var increment = this.count++
      bus.$emit('inc', increment)
  }
 }
})

Vue.component('Display', {
  template: "#display",
  data: function(){
  return({count: 0})
  },
 created: function(){
   bus.$on('inc', function(num){
   alert(num)
   this.count = num;
  });
 }
})

vm = new Vue({
 el: "#example",
})

我这样创建了我的模板：http: //codepen.io/p-adams/pen/PzpZBg

我想要 Increment 组件将计数传达给 Display 组件。我不确定我在 bus.$on() 做错了什么。

原文由 Mahmud Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是在你的 bus.$on 函数中， this 指的是总线。您只需要使用 .bind() 将当前 Vue 实例绑定到该函数：

 bus.$on('inc', function(num){
 alert(num)
 this.count = num;
}.bind(this));

如果你想管理全局应用程序状态，你还应该查看 https://github.com/vuejs/vuex 。

编辑：由于此页面似乎获得了很多点击，我想根据评论中的 ChristopheMarois 编辑并添加另一种方法：

编辑：为了让这个答案更清楚一点，所以未来的读者不需要阅读这里发生的事情的评论：

使用像下面这样的粗箭头将“this”的词法范围绑定到组件而不是事件总线。

 bus.$on('inc', (num) => {
 alert(num);
 this.count = num;
});

或删除警报：

 bus.$on('inc', (num) => this.count = num);

原文由 Jeff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

当您编写 ES5 JavaScript 时，您必须意识到您使用 this 关键字引用的内容可能会发生变化，根据范围，它是从调用的。

一个有用的比喻可以让您了解 this 概念是将 ES5 中的大括号视为栅栏，它包含/绑定它自己的 this 。

当你在事件总线的回调函数中使用 this 时， this 不是指你的Vue组件，而是 总线 对象，它没有 计数 数据，所以你期望的数据更新没有。

如果您有/想要编写 ES5 语法，一个常见的解决方法（除了绑定 this 正如接受的答案所建议的那样）是将 this 关键字分配给一个变量，如下所示：

 created: function(){
  var self = this;
  bus.$on('inc', function(num){
    alert(num)
    self.count = num;
  });
}

如果您可以编写 ES6，请尽可能这样做。您始终可以使用 Babel 编译/转译为 ES5。接受的答案向您展示了如何使用箭头功能。

箭头函数在这种情况下起作用，因为它们不绑定自己的 this 。

继续使用栅栏比喻：想象一下 ES6 箭头在您的函数栅栏上戳了一个洞，因此外部 this 可以通过，您可以按预期调用 this 。

要了解有关 ES6 箭头函数的更多信息，请访问： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

原文由 tomyam 发布，翻译遵循 CC BY-SA 3.0 许可协议