Vue.js全球事件总线

JavaScript Vue.js

西门达蒙Davaid

2020-03-19

我正在尝试创建全局事件总线,以便两个兄弟组件可以相互通信。我到处搜寻;但是,我找不到任何实现方法的示例。这是我到目前为止所拥有的:

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

第2339篇《Vue.js全球事件总线》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android