Vue中v-on支持方括号语法动态绑定事件名，如v-on:[eventName]="handler"，可结合prop、计算属性或表达式实现运行时事件切换，并需注意Vue版本兼容性及字符串合法性。
Vue 中 v-on 支持用方括号语法绑定动态事件名，只需把事件名写在中括号内，值为一个 JavaScript 表达式（通常是字符串或变量），就能实现运行时决定监听哪个事件。
用字符串变量控制监听的事件
最常见场景是组件接收一个事件名 prop，然后动态绑定。比如封装一个按钮组件，允许父组件指定点击后触发什么事件：
- 子组件模板中写：
v-on:[eventName]="handleClick" - data 或 setup 中定义
eventName: 'click'或eventName: 'dblclick' - 父组件传入：
<my-button :event-name="'contextmenu'"></my-button>
组合事件名：拼接字符串或使用计算属性
事件名可以是表达式，支持字符串拼接、三元判断等。例如：
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)" - 父组件使用：
<my-input :forward-event="'input'"></my-input> - 这样组件无需为每个事件写单独的
@xxx，靠一个 prop 就能切换行为
注意事项和兼容性
动态事件名是 Vue 2.6+ 和 Vue 3 的特性，Vue 2.5 及以下不支持。使用时注意：
- 中括号内必须是合法标识符或字符串，避免空格、特殊符号（如
v-on:['my event']会报错） - 推荐统一用 kebab-case 字符串（如
'item-click'），与自定义事件命名习惯一致 - 不要在中括号里直接写未定义变量，否则渲染时报错；建议加默认值或校验逻辑
