Vue中如何在父组件统一监听两个子组件的相同自定义事件？

Great question! The short answer is: Vue's custom component events don't bubble natively, so you can't just add @customEvent="handler" directly to the parent component's root template and have it catch events from child-comp-1 and child-comp-2. Let me break down why, and share some workarounds to achieve that "centralized listening" effect you're after.

Why it doesn't work out of the box #

Vue's custom events are component instance-based, not part of the native DOM event system. When a child component emits customEvent, it sends that event only to its immediate parent component instance—not up the entire component tree like native click or input events do. That's why your initial idea of binding the event directly on the parent's template won't pick up events from its children.

Workarounds to centralize event handling #

If you want to avoid repeating @customEvent="handler" on every child component, here are practical approaches:

1. Use an Event Bus (Vue 2 or Vue 3) #

Create a shared Vue instance to act as a central hub for events. This lets any component emit events, and any other component (regardless of hierarchy) listen for them.

// Create the event bus (you can put this in a separate file like event-bus.js)
// Vue 2:
const EventBus = new Vue()
// Vue 3:
// import { createApp } from 'vue'; const EventBus = createApp({})

// In child-comp-1 and child-comp-2, when you need to trigger the event:
methods: {
  triggerCustomEvent(data) {
    EventBus.$emit('customEvent', data)
  }
}

// In your parent component, listen and clean up the event:
mounted() {
  // Listen for the event from the bus
  EventBus.$on('customEvent', this.handler)
},
beforeDestroy() {
  // Always clean up listeners to prevent memory leaks!
  EventBus.$off('customEvent', this.handler)
}

2. Vue 3: Use provide/inject to share the handler #

In Vue 3, you can skip event emission entirely by providing the handler function from the parent to its children. This is a clean, component-tree-friendly approach:

<!-- Parent component -->
<script setup>
import { provide } from 'vue'

const handler = (eventData) => {
  // Your event handling logic here
  console.log('Handled custom event:', eventData)
}

// Provide the handler to child components
provide('customEventHandler', handler)
</script>

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

<!-- Child components (child-comp-1 and child-comp-2) -->
<script setup>
import { inject } from 'vue'

// Inject the handler from the parent
const customEventHandler = inject('customEventHandler')

// When you need to trigger the "event", just call the handler
const doSomething = () => {
  customEventHandler({ someData: 'foo' })
}
</script>

3. Use Vuex (for stateful events) #

If your custom event is tied to application state changes (like updating user preferences or data that multiple components depend on), Vuex is a robust choice. Instead of emitting events, child components dispatch actions or commit mutations, and the parent component reacts to state changes via computed properties or watchers. This is overkill for simple event handling, but perfect for complex state flows.

4. Manual propagation (not recommended) #

You could have each child emit the event to the parent, then the parent re-emits it upwards—but this creates tight coupling between components and gets messy quickly. For your scenario, this doesn't solve the problem of binding the handler to every child, so it's not a great fit.

Wrap-up #

For your specific use case, the Event Bus (for Vue 2 or 3) or Vue 3's provide/inject are the cleanest ways to avoid repeating the event binding on each child. Just remember to clean up event listeners when using the Event Bus to prevent memory leaks!

内容的提问来源于stack exchange，提问作者Sainath S.R