vue jsでeventbusで送信されたオブジェクトのアクセス値

Question

evntbusを使用して2つのコンポーネント間でデータを渡します ボタンをクリックすると、送信された関数がこのように実行され、他のコンポーネントにオブジェクトの配列が送信されます

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の 値は、あなたがいないコンポーネントに、EventBusにイベントを発するようには、EventBus.$emit('prod', this.products);する必要があり、

image

Answer 1

ファーストです。

第2に、this.products（配列）をイベントバスに渡しますが、ハンドラ関数内で単一のオブジェクトとして扱うようです。また、イベントのデータオブジェクトが格納された変数を何らかの形で記憶していると考えているような、任意の値（製品）にアクセスしようとしています。しかし、そうではありません。

だから、あなたが実際にEventBusへの製品の全体の配列を渡す必要があるかどうかに基づいて、次の2つのオプションがあります：

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