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

Answer 1

问题是在你的bus.$on功能中,this指的是总线.您只需要使用以下命令将当前Vue实例绑定到该函数.bind():

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

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

编辑:由于这个页面似乎得到了很多点击,我想编辑并添加另一种方法,根据评论中的每个ChristopheMarois:

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

或删除警报:

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