Vue中如何重发携带多个参数的$emit事件

Vue模板事件绑定中，$event 仅指代事件触发时传入的第一个参数，因此@input="$emit('input', $event)"的写法只能拿到第一个参数，剩余参数会被丢弃。

可根据场景选择以下方案实现全参数透传：

• 通用极简写法（兼容Vue2/Vue3）：直接通过函数内置的arguments对象获取所有入参，用展开运算符一次性透传，无需关心子组件传参数量：

<ThirdPartyComponent @input="$emit('input', ...arguments)" />

• 显式写法（Vue2.6+、Vue3支持）：用内联箭头函数接收全部参数再透传，逻辑更直观：

<ThirdPartyComponent @input="(...args) => $emit('input', ...args)" />

• 需添加自定义逻辑时的写法：在组件方法中统一处理参数，执行完自有逻辑后再向上抛出：

<template>
  <ThirdPartyComponent @input="handleInput" />
</template>

<script>
export default {
  methods: {
    handleInput(...args) {
      // 自定义业务逻辑，比如更新本地状态、参数校验、日志打印等
      console.log('子组件事件参数：', args)
      // 原样透传所有参数
      this.$emit('input', ...args)
    }
  }
}
</script>

注意：不要使用手动按索引拼接参数的写法，比如@input="$emit('input', $event, arguments[1])"，这类写法维护成本极高，子组件调整参数数量或顺序时透传逻辑会直接失效。

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