Vue,如何从父级内的两个子组件中侦听同一事件?

时间:2018-05-25 08:05:18

标签: events vue.js vue-component event-bubbling vue-events

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

由于我收到相同的事件并为这两个事件使用相同的事件处理程序,是否有一种方法可以共同监听它们,即我可以使事件像本机事件一样冒泡并使用类似

的内容
 <template id="parentComp" @customEvent="handler">

3 个答案:

答案 0 :(得分:1)

除了将事件传递给父母之外,您还可以使用事件总线。本文很好地描述了这个原则:https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

这个想法是使用共享的Vue实例来处理事件。然后,您将以不同的元素导入此实例,方法与导入库的方式相同。

答案 1 :(得分:0)

您可以使用$ 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>

答案 2 :(得分:0)

从多个组件进行监听。 从根级别发出并监听事件

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

现在您可以使用

从任何组件进行监听
mounted(){
    this.$root.$on('myTestEvent', (dataReceived) => {
       //...
    })
}