Vue3如何抛出子组件所有事件

在 Vue 3 中，如果你希望在父组件中使用子组件时，能够监听子组件中所有通过 emit 发出的事件，有以下几种方式可以实现“抛出子组件事件”的效果。

---

✅ 方法一：使用 defineEmits 并手动定义所有事件（推荐）

这是最标准的方式，但需要你明确列出子组件可能触发的事件。

📄 子组件 Child.vue：

<script setup>
const emit = defineEmits(['update', 'delete', 'submit'])

function handleClick() {
  emit('update', { id: 1 })
}
</script>

<template>
  <button @click="handleClick">更新</button>
</template>

📄 父组件：

<template>
  <Child @update="onUpdate" @delete="onDelete" @submit="onSubmit" />
</template>

---

✅ 方法二：使用 v-on="$attrs" 透传所有事件（适用于封装组件时）

如果你在中间组件（比如封装了一个组件）中想要把所有事件“转发”给底层组件，可以使用 v-on="$attrs"。

📄 中间组件 Wrapper.vue：

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

<template>
  <!-- 将所有事件透传给底层组件 -->
  <BaseButton v-bind="attrs" />
</template>

📄 父组件：

<template>
  <Wrapper @click="handleClick" @submit="handleSubmit" />
</template>

📌 注意：

• 事件会通过 $attrs 自动传递；
• 子组件必须设置 inheritAttrs: false（如果你想完全控制属性继承）；
• 这种方式适合中间封装组件将事件传递给更底层组件。

---

✅ 方法三：动态监听所有事件（不推荐，Vue 不提供直接 API）

Vue 没有提供“监听所有事件”的官方 API，但你可以通过 $attrs 或 vnode.props 进行一些 hack 方式监听。

⚠️ 注意：这不是推荐方式，仅供参考。

<template>
  <Child v-bind="listeners" />
</template>

<script setup>
import { useAttrs, computed } from 'vue'

const attrs = useAttrs()

// 过滤出所有以 onXxx 开头的事件监听器
const listeners = computed(() => {
  return Object.keys(attrs)
    .filter(key => key.startsWith('on'))
    .reduce((acc, key) => {
      acc[key] = attrs[key]
      return acc
    }, {})
})
</script>

---

✅ 方法四：使用 defineExpose 暴露 emit 方法（不常用）

你可以通过 defineExpose 暴露子组件中的 emit 方法，让父组件直接调用 emit。

📄 子组件 Child.vue：

<script setup>
const emit = defineEmits(['customEvent'])

function trigger() {
  emit('customEvent', 'some data')
}

defineExpose({ trigger })
</script>

📄 父组件：

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const childRef = ref()

onMounted(() => {
  childRef.value.trigger()
})
</script>

<template>
  <Child ref="childRef" @customEvent="handleEvent" />
</template>

---

✅ 总结

方式	说明	适用场景
✅ defineEmits	明确声明事件	推荐方式，类型安全
✅ v-on="$attrs"	事件透传	封装组件时使用
⚠️ 动态监听	通过 props/onXxx 检测	不推荐，维护性差
defineExpose	暴露 emit 或方法	父组件主动调用子组件方法