Vue中不能用@[]动态绑定事件，需用v-on:[eventName]；Vue3和2.7+支持，修饰符写在括号外；兼容低版本可用ref+addEventListener或渲染函数传入on对象。

Vue 中不能直接用方括号语法（如 @[eventName]）动态绑定事件类型，因为模板编译时 @ 是语法糖，会被静态解析为 v-on:xxx，不支持运行时动态 key。

用 v-on 指令配合动态 key

在 Vue 2 和 Vue 3 的模板中，可以使用 v-on（而非 @）配合中括号语法，实现事件类型的动态绑定：

<button v-on:[eventName]="handleEvent">点击</button>

其中 eventName 是响应式数据（如 ref('click') 或 data() { return { eventName: 'click' } }），Vue 会自动监听对应事件。支持原生事件（click、input、keyup.enter 等）和自定义事件（需子组件触发）。

• Vue 3 完全支持该写法（组合式 API 和选项式 API 均可）
• Vue 2.7+ 也支持（但 2.6 不支持，会报错）
• 事件修饰符需写在方括号外：v-on:[eventName].stop.prevent="handler"

兼容 Vue 2.6 或需要更灵活控制的场景

若需兼容低版本或动态决定是否绑定/解绑，推荐用 ref + 原生 DOM 方法：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

• 给元素加 ref="btn"
• 在 mounted（或 onMounted）中手动添加事件监听器：this.$refs.btn.addEventListener(this.eventName, this.handleEvent)
• 注意在 beforeUnmount 中移除，避免内存泄漏

通过渲染函数或 v-bind 绑定事件对象（高级用法）

在 setup 或 render 函数中，可构造事件监听对象并传入：

const eventListeners = {
  [eventName.value]: handleEvent,
  [`${eventName.value}.once`]: handleOnce
}
// 在 h() 或 JSX 中使用：
h('button', { onClick: handleEvent }, '按钮')
// 或
h('button', { on: eventListeners }, '按钮')

这种方式完全运行时可控，适合封装高阶组件或指令逻辑。

常见错误提醒

• @[eventName]="handler" ❌ 模板中无效，编译报错
• v-on:eventName ❌ 静态字符串，不会响应变化
• 动态事件名含空格、大写字母或特殊字符时，需确保符合 DOM 事件规范（如用 my-event 而非 myEvent）