Vue、親内の2つの子コンポーネントから同じイベントを聞く方法は？

イベントを親に渡すだけでなく、イベントバスを使用できます。この記事では、この原則について詳しく説明しています：https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

アイデアは、共有Vueインスタンスを使用してイベントを処理することです。次に、ライブラリをインポートするのと同じ方法で、このインスタンスを異なる要素にインポートします。

イベントバブリングに$listenersを使用できます。例を挙げてください

Vue.component('inner-com',{
  template: '<div>inner component<button @click="innerClick">emit event</button></div>',
  methods: {
    innerClick () {
      this.$emit('inner-com-click-event');
    }
  }
})
Vue.component('middle-com',{
  template: '<div>middle component<inner-com v-on="$listeners"></inner-com></div>'
})
Vue.component('outer-com',{
  template: '<div>outer component<middle-com v-on="$listeners"></middle-com></div>'
})

var app = new Vue({
  el:'#app',
  methods: {
    eventHandler () {
      alert('event receved')
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <outer-com @inner-com-click-event="eventHandler"></outer-com>
</div>