VUE 2.0 구성 요소 사이의 이벤트로 후크를 만드는 방법

Question

두 개의 dynamic 구성 요소를 만들었습니다.

Vue.component('component-one', { 
    template: '#template-a', 
    methods: { 
     onClick() { 
      const someObj = { 
       foo: "foo", 
       bar: "bar" 
      } 

      vm.$emit('selected', someObj) 
      vm.currentView ='component-two'; 
     } 
    } 
}); 

//Any hint?? 
/*vm.$on('selected', (someObj) => { 
    this.logThat(someObj) 
})*/ 

Vue.component('component-two', { 
    template: '#template-b', 
    methods: { 
     onClick() { 
      vm.currentView ='component-one'; 
     }, 
     logThat(someObj) { 
      console.log(someObj); 
     } 
    } 
}); 

https://jsfiddle.net/wanxe/yuh71e1o/

경우 : 이제, "logThat (someObj에)"이 바이올린에서 볼 수 있듯이 인수를 통과하는 구성 요소 두 가지의 방법을 해고 내가 필요한 events: $emit/$on 이다 사용 아무도 이것을 처리하는 방법에 대한 제안이있다, 그것은 이해 될 것이다 :)

Answer 1

기술적으로, 당신은 Non-parent-child communication 문서에 주어진대로 사용해야합니다.

그러나 현재 예제에서는 작동하지 않습니다. 이유 : 앞뒤로 움직이면서 구성 요소 '1'과 '2'가 생성되고 파괴됩니다.

여기에 업데이트 된 jsFiddle : https://jsfiddle.net/mani04/yuh71e1o/4/이 있습니다. 여기에 변경 사항은 다음과 같습니다

이벤트 버스 : 당신이 열 경우

created: function() { 
    console.log("Created component-two, listening for 'selected' event"); 
    bus.$on('selected', this.logThat); 
} 

: 구성 요소 두

bus.$emit('selected', someObj); 

받기 이벤트 :

var bus = new Vue(); 

가 구성 요소 하나에서 이벤트를 보내기 dev 콘솔과 로그를 관찰하면 component-two가 여러 번 생성되고 이전 구성 요소가 생성된다는 것을 알 수 있습니다. 그들은 완전하게 파괴되지 않았기 때문에 듣고 있었다.

이 문제를 극복하려면 동적 구성 요소에서 벗어나 루트 템플릿에 component-one과 component-two을 동시에 만들어야합니다. v-show (다시는 구성 요소 인스턴스를 파괴하는 v-if이 아님)을 사용하여 원하는보기를 기준으로 표시하거나 숨길 수 있습니다. 그런 다음 Non-parent-child communication docs에 설명 된대로 이벤트 버스를 사용하여 통신 할 수 있습니다.