Użyj polecenia vm. $ On, aby wysłuchać zdarzenia emitowanego przez element potomny w pliku vue.js 2.0

Question

Przeszedłem przez sekcję zdarzeń vue.js poświęconą zdarzeniom, ale zdaje się podawać tylko przykłady tego, jak słuchać zdarzeń za pomocą polecenia vm. $ on handler within html. Między tym a nowymi zmianami w wersji 2.0 nie jestem pewien, jak po prostu przesłać zdarzenie z elementu potomnego -> nadrzędnego.

Muszę transmitować wydarzenie, ponieważ po otrzymaniu rodzica chcę go nadać innemu dziecku.

używam pojedynczych elementów strony, to jest moja konfiguracja:

// parent 
export default { 
    mounted: function() { 
    this.$on('myEvent', function (msg) { 
    console.log('caught in parent', msg) 
    }); 
}, 
components: { 
    'child': child, 
}, 
} 

// child 
this.$emit('myEvent', true) 

Jak mogę otrzymać to zdarzenie na VM dominującej proszę? Uwaga, nie chcę używać $ on w html. Chcę, aby logika odbioru zdarzenia była w vm, gdzie powinna być.

Dzięki,

Answer 1

Vues dokumentację $emit nie jest bardzo obszerny, jednak istnieje kilka sposobów, aby to zrobić. Po pierwsze trzeba $emit modelu vue chcesz wysłać wiadomość, jeśli chcesz używać this.$on(), więc jeśli wysyłasz z komponentu można emitować do bezpośredniego rodzica przy użyciu:

this.$parent.$emit('myEvent',true); 

to jednak może stać się problematyczne, jeśli masz długi łańcuch rodziców, bo trzeba $emit górę łańcucha dziecko, więc w tym przypadku można użyć instancji Vue jako autobusem:

// In the root as a global variable so all components have access 
var bus = new Vue({}); 

lub jeśli używasz pojedynczych komponentów plików .

window.bus = new Vue({}); 

Następnie w odbiorniku:

bus.$on('myEvent',() => { 
    // Do stuff 
}); 

I emitera:

bus.$emit('myEvent',true); 

Wreszcie, jeśli znajdziesz app się zbyt skomplikowane dla zwykłego autobusu można użyć vuex :

https://vuex.vuejs.org/en/index.html