Parece que o Vue.js 2.0 não emite eventos de um neto para o componente de seu avô.
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 resolve o problema https://jsfiddle.net/y5dvkqbd/4/ , mas emtting dois eventos:
- Um do neto ao componente do meio
- Em seguida, emitindo novamente do componente do meio para o avô
Adicionar este evento intermediário parece repetitivo e desnecessário. Existe uma maneira de emitir diretamente para os avós que eu não conheço?