Как создать крючок с событиями между компонентами VUE 2.0

Question

Я создал два компонента dynamic. Теперь, используя events: $emit/$on , что мне нужно будет уволить «logThat (someObj)» метод компонента-два, проходящей аргументы, как вы можете видеть в этом скрипку:

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/

Если у кого есть какие-либо предложения о том, как справиться с этим, будет понятно :)

Answer 1

Технически, вы должны использовать Non-parent-child communication, как указано в документации.

Но в вашем текущем примере это не сработает. Причина: ваши компоненты «один» и «два» создаются и уничтожаются при движении вперед и назад.

Настоящий обновленный jsFiddle: https://jsfiddle.net/mani04/yuh71e1o/4/. Вот изменения: автобус

Событие:

var bus = new Vue(); 

Отправка события из компонента-одном:

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

Прием событий в компоненте-два:

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

Если вы откроете консоль dev и наблюдать за журналами, вы заметите, что компонент-два создается несколько раз, а старые ke так как они не полностью уничтожены.

Чтобы преодолеть это, вам необходимо отойти от динамических компонентов и одновременно создать и ваши component-one, и component-two, созданные в вашем корневом шаблоне. Вы можете отображать/скрывать на основе любого желаемого вида, используя v-show (не v-if, который снова уничтожает экземпляр компонента). Затем вы можете использовать шину событий для связи, как описано в Non-parent-child communication docs.