计算属性名可动态生成事件监听器名称,实现自定义事件灵活绑定;通过@[eventname]语法绑定响应式事件名,支持带参数事件,需确保字符串合法性、父子事件名一致及handler兼容性。

计算属性名可以让你在 Vue 中动态生成事件监听器的名称,从而实现自定义事件的灵活绑定。关键在于:事件名本身是响应式数据,配合 v-on(或 @)的方括号语法,就能让监听的事件名随数据变化而自动更新。
使用方括号语法绑定动态事件名
Vue 支持用 @[eventName] 的形式绑定事件,其中 eventName 是一个计算属性或响应式变量:
- 确保该变量返回合法的事件名字符串(如
"click"、"update:modelValue"或自定义的"onSubmit") - 事件名可以含冒号(如
"update:modelValue"),但需注意命名规范与子组件触发逻辑匹配 - 若变量为
null或空字符串,Vue 会忽略该监听器,不会报错
在组合式 API 中通过 computed 构建动态事件名
在 setup() 中,用 computed 返回事件名,能响应式地联动其他状态:

