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

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...

Never miss a post from Aditya Agrawal, when you sign up for Ednsquare.