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의 값은 당신이 아니라 구성 요소의 EventBus에 이벤트를 방출로는, EventBus.$emit('prod', this.products);해야한다,

image

Answer 1

처음이다.

두 번째로 이벤트 버스에 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));