如何通过使用事件总线与自定义事件数据Vue.js 2(How to pass data with c

我使用Vue.js 2.5.x.

在我的玩具项目，我实现了一个事件总线（类似于显示什么这里 ）。 事件总线在Vue的原型全局注册$eventBus 。

然后我创建的发射事件的组件如下

this.$eventBus.$emit('actionCompleted')

而另一个寄存器该事件来执行其自身的功能（ myMethod ），如下所示

export default {
  created: function () {
      this.$eventBus.$on('actionCompleted', this.myMethod)
  },
  methods: {
    myMethod () {
        console.log('myMethod called')
    }
  }
}

到目前为止好，预期所有的作品。

现在的问题是：我怎么能传递一个对象到我的自定义事件，这样我可以运送更多的信息给听众？

Answer 1:

你可以通过你的参数作为第二个参数

this.$eventBus.$emit('actionCompleted', objectParams)

export default {
  created: function () {
      this.$eventBus.$on('actionCompleted', this.myMethod)
  },
  methods: {
    myMethod (objectParams) {
        console.log('myMethod called', objectParams)
    }
  }
}

您可以查看下面的教程

Answer 2:

您可以创建活动像这样的一个参数：

this.$eventBus.$emit('actionCompleted',args)

您可以通过逗号分隔值传递的倍数参数。

多个参数：

this.$eventBus.$emit('actionCompleted',args1, args2 ...)

经过这样的说法后，就可以得到如下[单参数]：

export default {
  created: function () {
      this.$eventBus.$on('actionCompleted', this.myMethod)
  },
  methods: {
    myMethod (args) {
        console.log('myMethod called', args)
    }
  }
}

Answer 3:

你可以简单地通过你的事件总线发出的对象：

this.$eventBus.$emit('actionCompleted', this.yourObject)

然后抓住它是这样的：

export default {
  created: function () {
      this.$eventBus.$on('actionCompleted', this.myMethod)
  },
  methods: {
    myMethod (objectParams) {
        console.log('myMethod called', objectParams)
    }
  }
}

文章来源: How to pass data with custom events using an event bus in Vue.js 2