Vue3如何向子组件批量传递多个事件监听器及对应处理函数

你想要的批量事件绑定能力完全可以实现，只需调整你的错误写法即可 #

你写的<input @events />语法不被Vue支持，Vue提供了和v-bind批量绑定属性对应的v-on批量绑定事件能力：v-on可以直接接收一个键为事件名、值为处理函数的对象，自动完成所有事件的绑定。

方案1：和你批量传属性逻辑完全一致的显式传参写法

父组件代码

<ChildComponent :events="{ input: () => alert('input!'), blur: () => alert('blur!') }" />

子组件代码

<template>
  <!-- 用v-on绑定传入的events对象即可 -->
  <input v-on="events" />
</template>

<script>
export default {
  props: {
    events: {
      type: Object,
      // 无事件传入时默认是空对象，避免绑定报错
      default: () => ({})
    }
  }
}
</script>

方案2：更符合Vue最佳实践的透传写法（无需显式定义prop）

Vue3中$attrs已经包含了父组件传递的所有未被props声明的属性、class、style、事件监听器，不需要单独封装事件对象传递，组件使用体验和原生元素完全一致：

父组件代码（正常写属性和事件即可）

<ChildComponent 
  id="the-id"
  class="the-class"
  @input="() => alert('input!')"
  @blur="() => alert('blur!')"
/>

子组件代码

<template>
  <input v-bind="$attrs" />
</template>

<script>
export default {
  // 不需要额外声明props接收属性、事件
}
</script>

两种方案都完全适配你的需求：需要绑定什么事件就传什么，不需要绑定就不传，不会产生额外的冗余逻辑。

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