在vue js中使用eventbus发送的对象的访问值

Question

我使用 evntbus 在两个组件之间传递数据 在第一个中，当我单击按钮时，提交的函数是这样执行的，我将对象数组发送到另一个组件

submitted(){
  this.products.push(this.product); 
  EventBus.$emit('prod', this.products); 
}

---

在另一个组件中：

created(){
  EventBus.$on('prod', function (productObject) {
    console.log('event received!', userObject);
    this.produc = productObject.products
    console.log('The product: ', this.produc)
  }.bind(this));
  console.log('User outside eventbus:', this.produc);
}

问题是我无法访问在第二个组件中通过 eventbus 传递的对象没有任何人可以帮助我吗？ productobject 的值为

image

Answer 1

首先，它应该是EventBus.$emit('prod', this.products);，因为您在 EventBus 上而不是在组件上发出事件。

其次，您将this.products（一个数组）传递给事件总线，但似乎将其视为处理函数中的单个对象。此外，您正在尝试访问它的一些任意值（产品），显然认为事件数据对象以某种方式记住它存储在哪个变量中。但事实并非如此。

因此，根据您是否确实需要将整个产品数组传递到 EventBus，您有两种选择：

1) 如果您在其他地方确实需要 this.products，请访问它在该其他组件中的最后一个元素：

EventBus.$on('prod', function(products) {
  this.product = products[products.length - 1]; 
  console.log('The product: ', this.product);
}.bind(this));

2）如果没有，直接发单品直接使用即可：

EventBus.$emit('prod', this.product);

// ...and in another component
EventBus.$on('prod', function(product) {
  this.product = product; 
  console.log('The product: ', this.product);
}.bind(this));