Vue.js中如何将所有事件传递至层级更深的祖先组件？

为什么v-on="$attrs"会失效？ #

你搞反了v-on="$attrs"的作用方向：它是将当前组件从父组件接收到的事件监听，向下传递给子组件，而非把子组件触发的emit事件向上转发给当前组件的父组件。

举个例子：View_4用v-on="$attrs"，只是把View_3传给View_4的事件监听绑定给View_5，但View_5触发的go事件，View_4并没有主动把这个事件向上emit给View_3，所以View_3根本接收不到这个事件，自然无法继续传递给上层组件。

实现无手动转发的跨层级事件透传 #

针对你的需求（组件D触发事件，中间组件C、B无需手动监听，直接透传到组件A），提供几个实用方案：

方案一：用provide/inject直接传递顶层处理逻辑 #

这是最清晰可控的方案，避免事件链的冗余转发：

1. 在顶层组件A中，把事件处理函数通过provide向下传递：

<script setup>
import { ref, provide } from 'vue'
const msg = ref('Hi')

// 定义事件处理函数并提供给后代组件
const handleGo = (value) => {
  msg.value = value
}
provide('handleGo', handleGo)
</script>

2. 在最底层组件D中，通过inject拿到这个函数，直接调用：

<script setup>
import { inject } from 'vue'
const handleGo = inject('handleGo')

const triggerEvent = () => {
  handleGo('从D组件传来的内容')
}
</script>

<template>
  <div class="box" @click="triggerEvent"></div>
</template>

中间组件C、B不需要任何额外代码，完全不用关心事件传递。

方案二：封装通用透传组件自动转发事件 #

如果需要批量透传所有事件，可以封装一个通用的透传组件，自动转发子组件的所有emit事件：

1. 创建Passthrough.vue：

<script setup>
import { ref, watch } from 'vue'
const emit = defineEmits([]) // 允许触发任意事件
const child = ref(null)

// 监听子组件实例，重写其emit方法实现转发
watch(child, (instance) => {
  if (!instance) return
  const originalEmit = instance.emit
  instance.emit = (...args) => {
    originalEmit(...args) // 保留子组件原有的emit逻辑
    emit(...args) // 向上转发事件
  }
})
</script>

<template>
  <slot ref="child" v-on="$attrs" />
</template>

2. 在中间组件C、B中用这个组件包裹子组件：
   比如组件C：

<script setup>
import Passthrough from './Passthrough.vue'
import D from './D.vue'
</script>

<template>
  <Passthrough>
    <D />
  </Passthrough>
</template>

组件B同理，用Passthrough包裹C组件即可。这样D组件触发的所有emit事件，都会自动透传到A组件。

方案三：全局事件总线（不推荐，适合简单场景） #

如果项目规模小，也可以用全局事件总线快速实现，但容易造成全局污染，不利于维护：

1. 在项目入口文件中创建总线实例（推荐用mitt库，比原生更可靠）：

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const app = createApp(App)
app.config.globalProperties.$bus = mitt()
app.mount('#app')

2. 在组件D中触发事件：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const triggerEvent = () => {
  proxy.$bus.emit('go', '从D组件传来的内容')
}
</script>

3. 在组件A中监听事件：

<script setup>
import { ref, getCurrentInstance, onMounted, onUnmounted } from 'vue'
const msg = ref('Hi')
const { proxy } = getCurrentInstance()

onMounted(() => {
  proxy.$bus.on('go', (value) => {
    msg.value = value
  })
})

// 组件销毁时记得移除监听，避免内存泄漏
onUnmounted(() => {
  proxy.$bus.off('go')
})
</script>

内容的提问来源于stack exchange，提问作者qubicswap.com