[解決済み] VueJs 2.0 孫コンポーネントから孫コンポーネントへのイベントの発行

質問

Vue.js2.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'
})

このJsFiddleは問題を解決します https://jsfiddle.net/y5dvkqbd/4/ を解決していますが、2つのイベントを emtting しています。

• 孫から中間コンポーネントへ
• その後、ミドルコンポーネントからグランドペアレントへ再度発信

この中間イベントを追加することは、反復的で不要に思えます。私が知らないだけで、直接グランドペアレントへ送信する方法があるのでしょうか？

どのように解決するのですか？

新解答(2018年11月更新)

を活用することで、実はこんなことができることを発見しました。 $parent プロパティを利用することで実現できることがわかりました。

this.$parent.$emit("submit", {somekey: somevalue})

よりすっきり、よりシンプルになりました。