Vue中v-on支持方括号语法动态绑定事件名，如v-on:[eventName]="handler"，可结合prop、计算属性或表达式实现运行时事件切换，并需注意Vue版本兼容性及字符串合法性。

Vue 中 v-on 支持用方括号语法绑定动态事件名，只需把事件名写在中括号内，值为一个 JavaScript 表达式（通常是字符串或变量），就能实现运行时决定监听哪个事件。

用字符串变量控制监听的事件

最常见场景是组件接收一个事件名 prop，然后动态绑定。比如封装一个按钮组件，允许父组件指定点击后触发什么事件：

• 子组件模板中写：v-on:[eventName]="handleClick"
• data 或 setup 中定义 eventName: 'click' 或 eventName: 'dblclick'
• 父组件传入：

组合事件名：拼接字符串或使用计算属性

事件名可以是表达式，支持字符串拼接、三元判断等。例如：

• v-on:[isCustom ? 'custom-event' : 'click']="onTrigger"
• v-on:['mouse' + eventType]="handleMouse"（eventType 是 'enter' 或 'leave'）
• 更清晰的做法是用计算属性返回最终事件名：v-on:[triggerEvent]="onAction"，其中 triggerEvent 返回 'submit' 或 'change'

配合 $emit 实现事件透传的通用组件

构建高复用表单控件（如输入框）时，可让父组件决定要监听哪个原生事件，并原样透传参数：

• 子组件绑定：v-on:[forwardEvent]="$event => $emit(forwardEvent, $event)"
• 父组件使用：
• 这样组件无需为每个事件写单独的 @xxx，靠一个 prop 就能切换行为

注意事项和兼容性

动态事件名是 Vue 2.6+ 和 Vue 3 的特性，Vue 2.5 及以下不支持。使用时注意：

• 中括号内必须是合法标识符或字符串，避免空格、特殊符号（如 v-on:['my event'] 会报错）
• 推荐统一用 kebab-case 字符串（如 'item-click'），与自定义事件命名习惯一致
• 不要在中括号里直接写未定义变量，否则渲染时报错；建议加默认值或校验逻辑