How to emit event from grand child to his grand parent component in VueJs 2.0?

Answer • 1 Asked • Jun 13 2019
It seems that Vue.js 2.0 doesn't emit events from a grand child to his grand parent component.
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' })

his JsFiddle solves the issue but by emtting two events:
  • One from grand child to middle component
  • Then emitting again from middle component to grand parent

Adding this middle event seems repetitive and unneccessary. Is there a way to emit directly to grand parent that I am not aware of?

Write your answer...

On a mission to build Next-Gen Community Platform for Developers