Vue3如何将组件所有触发事件转发至父组件？

组件结构 #

<TopParent> <!-- 目标：在此监听 EventProducer 触发的事件 -->
  <Child_1>
    <Child_2>
      <Child_3>
        ... 
        <Child_N>
          <EventProducer /> <!-- 在此组件内触发事件 -->
        </Child_N>
      </Child_3>
    </Child_2>
  </Child_1>
</TopParent>

需求 #

让EventProducer触发的所有事件自动透传到TopParent，中间的Child_1~Child_N无需逐个指定事件名称手动转发。

低效方案（反面示例） #

手动为每个事件添加转发逻辑，扩展性极差：

<TopParent @foo="doTheJob()">
  <Child_1  @foo="emit('foo')">
    <Child_2  @foo="emit('foo')">
      <Child_3  @foo="emit('foo')">
        ... 
        <Child_N @foo="emit('foo')">
          <EventProducer @click="emit('foo')"/> 
        </Child_N>
      </Child_3>
    </Child_2>
  </Child_1>
</TopParent>

高效解决方案 #

方案1：Vue 2 基于 $listeners 自动透传 #

Vue2 内置$listeners属性，包含父组件传递给当前组件的所有事件监听器，中间组件只需将其透传给子组件即可：

在所有中间组件（Child_1~Child_N）的模板中添加：

<template>
  <!-- 若中间组件包含子组件，直接绑定$listeners -->
  <Child_2 v-on="$listeners"></Child_2>
  
  <!-- 若用插槽分发内容，绑定到slot上 -->
  <!-- <slot v-on="$listeners"></slot> -->
</template>

这样所有事件会自动从EventProducer向上透传到TopParent，无需手动处理单个事件。

方案2：Vue 3 基于 useAttrs 自动透传 #

Vue3 移除了$listeners，但可以通过useAttrs获取包含事件的属性集合，实现全事件透传：

在所有中间组件的代码中添加：

<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
</script>

<template>
  <!-- 将所有属性（含事件）透传给子组件 -->
  <Child_2 v-bind="attrs"></Child_2>
  
  <!-- 若用插槽，绑定到slot上 -->
  <!-- <slot v-bind="attrs"></slot> -->
</template>

也可以利用Vue3的默认行为：如果中间组件未声明emits选项，所有未被组件处理的事件会自动向上冒泡，无需额外代码（仅适用于非自定义原生事件场景）。

方案3：全局事件总线（跨层级通用） #

如果不想依赖组件层级关系，可使用全局事件总线，适用于Vue2和Vue3：

Vue2 实现

1. 创建总线实例：

// bus.js
import Vue from 'vue'
export const bus = new Vue()

2. 在EventProducer中触发事件：

import { bus } from './bus.js'
export default {
  methods: {
    handleTrigger() {
      bus.$emit('any-event', eventData)
    }
  }
}

3. 在TopParent中监听事件：

import { bus } from './bus.js'
export default {
  mounted() {
    bus.$on('any-event', (data) => {
      // 处理事件逻辑
    })
  },
  beforeDestroy() {
    bus.$off('any-event') // 销毁时移除监听，避免内存泄漏
  }
}

Vue3 实现（用mitt库）

1. 安装依赖：

npm install mitt

2. 创建总线：

// bus.js
import mitt from 'mitt'
export const emitter = mitt()

3. 在EventProducer中触发事件：

import { emitter } from './bus.js'
emitter.emit('any-event', eventData)

4. 在TopParent中监听事件：

import { emitter } from './bus.js'
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  emitter.on('any-event', (data) => {
    // 处理事件逻辑
  })
})

onUnmounted(() => {
  emitter.off('any-event') // 清理监听
})

内容的提问来源于stack exchange，提问作者eXception