看来是Vue.js 2.0不会将事件从一个孙辈发送到他的孙辈组件.
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'
})
这个JSFIDLE解决了问题https://jsfiddle.net/y5dvkqbd/4/，但通过执行两个事件:
- 一个是从孙子到中间的部分
- 然后再次从中间组件emits 到父级
添加这个中间事件似乎是重复和不必要的.有没有一种我不知道的直接向祖父母emits 的方法？