Parece que Vue.js 2.0 no emite eventos de un nieto a su componente principal.
Vue.component('parent', { template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>', data(){ return { action: 'No action' } }, methods: { performAction() { this.action = 'actionDone' } } }) Vue.component('child', { template: '<div>I am the child <grand-child></grand-child></div>' }) Vue.component('grand-child', { template: '<div>I am the grand-child <button @click="doEvent">Do Event</button></div>', methods: { doEvent() { this.$emit('eventtriggered') } } }) new Vue({ el: '#app' })Este JsFiddle resuelve el problema https://jsfiddle.net/y5dvkqbd/4/ , pero al generar dos eventos:
Agregar este evento intermedio parece repetitivo e innecesario. ¿Hay alguna forma de emitir directamente a los abuelos que no conozco?
Vue 2.4 introdujo una forma de pasar eventos fácilmente a la jerarquía usando vm.$listeners
De https://vuejs.org/v2/api/#vm-listeners :
Contiene detectores de eventos
v-onde alcance principal (sin modificadores.native). Esto se puede transmitir a un componente interno a travésv-on="$listeners", útil al crear componentes de envoltura transparentes.
Vea el fragmento a continuación usando v-on="$listeners" en el componente grand-child en la plantilla child :
Vue.component('parent', { template: '<div>' + '<p>I am the parent. The value is {{displayValue}}.</p>' + '<child @toggle-value="toggleValue"></child>' + '</div>', data() { return { value: false } }, methods: { toggleValue() { this.value = !this.value } }, computed: { displayValue() { return (this.value ? "ON" : "OFF") } } }) Vue.component('child', { template: '<div class="child">' + '<p>I am the child. I\'m just a wrapper providing some UI.</p>' + '<grand-child v-on="$listeners"></grand-child>' + '</div>' }) Vue.component('grand-child', { template: '<div class="child">' + '<p>I am the grand-child: ' + '<button @click="emitToggleEvent">Toggle the value</button>' + '</p>' + '</div>', methods: { emitToggleEvent() { this.$emit('toggle-value') } } }) new Vue({ el: '#app' }) .child { padding: 10px; border: 1px solid #ddd; background: #f0f0f0 } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <parent></parent> </div>NUEVA RESPUESTA (actualización de noviembre de 2018)
Descubrí que en realidad podíamos hacer esto aprovechando la propiedad $parent en el componente grand child:
this.$parent.$emit("submit", {somekey: somevalue})Mucho más limpio y sencillo.
La comunidad de Vue generalmente favorece el uso de Vuex para resolver este tipo de problemas. Los cambios se realizan en el estado de Vuex y la representación DOM simplemente fluye a partir de eso, eliminando la necesidad de eventos en muchos casos.
Salvo eso, la reemisión probablemente sea la siguiente mejor opción y, por último , puede elegir usar un bus de eventos como se detalla en la otra respuesta altamente votada a esta pregunta.
La respuesta a continuación es mi respuesta original a esta pregunta y no es un enfoque que tomaría ahora, ya que tengo más experiencia con Vue.
Este es un caso en el que podría no estar de acuerdo con la elección de diseño de Vue y recurrir a DOM.
en grand-child ,
methods: { doEvent() { try { this.$el.dispatchEvent(new Event("eventtriggered")); } catch (e) { // handle IE not supporting Event constructor var evt = document.createEvent("Event"); evt.initEvent("eventtriggered", true, false); this.$el.dispatchEvent(evt); } } } y en parent ,
mounted(){ this.$el.addEventListener("eventtriggered", () => this.performAction()) }De lo contrario, sí, hay que volver a emitir, o utilizar un autobús.
Nota: agregué código en el método doEvent para manejar IE; ese código podría extraerse de forma reutilizable.