Vue 3使用对象语法绑定动态事件时如何向事件处理函数传递额外参数

核心原理：给每个事件处理函数套一层代理，在代理层把自定义参数和原生事件对象一起传给原处理函数，无需提前预知事件类型

实现方案 #

步骤1：调整action的结构，单独存放自定义数据

先修改my-actions.js，把需要传递的自定义数据和事件处理器拆分（注：原代码中actions为对象无法直接v-for遍历，这里调整为数组格式，若需要遍历对象可自行调整v-for语法）：

// my-actions.js
export const actions = [
  {
    id: 'action1',
    name: '我的操作',
    // 自定义数据单独存放，可任意定义结构
    customData: { type: 'test', value: '自定义参数' },
    eventHandlers: {
      click: (event, myData) => {
        console.log('点击事件触发，自定义数据：', myData);       
      },
      mousedown: (event, myData) => {
        console.log('鼠标按下触发，自定义数据：', myData);
      }
    }
  }
]

步骤2：封装通用事件包装函数

在组件中实现一个通用的包装函数，遍历所有事件处理器，给每个处理器套一层代理，注入自定义数据：

<script>
import { actions } from '@/lib/my-actions.js';

export default {
  setup(props, ctx){
    // 通用事件包装函数
    const wrapEventHandlers = (originalHandlers, customData) => {
      const wrappedHandlers = {}
      // 自动遍历所有事件类型，无需提前感知
      Object.keys(originalHandlers).forEach(eventName => {
        wrappedHandlers[eventName] = (event) => {
          // 调用原处理函数，同时传入事件对象和自定义数据
          originalHandlers[eventName](event, customData)
        }
      })
      return wrappedHandlers
    }

    // （可选优化）提前在setup阶段完成所有事件包装，避免模板重复执行函数
    const processedActions = actions.map(action => ({
      ...action,
      wrappedHandlers: wrapEventHandlers(action.eventHandlers, action.customData)
    }))

    return {
      processedActions
    }
  },
}
</script>

步骤3：模板绑定包装后的事件对象

直接在模板中使用v-on绑定包装后的事件对象即可：

<template>
   <template v-for="action in processedActions" :key="action.id">
       <button v-on="action.wrappedHandlers">
           {{ action.name }}
       </button>
   </template>
</template>

方案优势 #

• 完全符合Vue3官方语法规范，无兼容性问题
• 支持任意事件类型，新增事件仅需在eventHandlers中添加定义，组件代码无需修改
• 每个action可独立定义自定义数据结构，灵活度高
• 原生事件对象完整保留，和常规事件绑定的使用逻辑完全一致

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