Vue, как слушать одно и то же событие от двух дочерних компонентов внутри родителя?

Question

<template id="parentComp">
<child-comp-1 @customEvent="handler"/>
<child-comp-2 @customEvent="handler"/>
</template>

Поскольку я получаю одно и то же событие и использую один и тот же обработчик событий для обоих событий, есть ли способ их общего прослушивания, т. Е. Могу ли я сделать событие всплывающим как нативные события и использовать что-то вроде

 <template id="parentComp" @customEvent="handler">

Answer 1

Помимо простой передачи события родителю, вы можете использовать шину событий. Эта статья хорошо описывает этот принцип: https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

Идея состоит в том, чтобы использовать общий экземпляр Vue для обработки событий. Затем вы импортируете этот экземпляр в разные элементы, так же, как импортировали бы библиотеку.

Answer 2

Чтобы слушать из нескольких компонентов. Генерация и прослушивание события с корневого уровня

this.$root.$emit('myTestEvent',dataToBeSent);

Теперь вы можете слушать любой компонент, используя

mounted(){
    this.$root.$on('myTestEvent', (dataReceived) => {
       //...
    })
}

Answer 3

Вы можете использовать $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>