Vue中的 $event
Vue 模板中的 `$event` 是接收事件负载的特殊变量，用于把事件参数传给处理函数。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 上位主题: vue-component-communication
- 相关概念: Vue中的props和emit, vue-v-model, vue-custom-directives
Vue中的 $event
$event 是 Vue 模板中的一个特殊变量，用来接收当前事件携带的参数。它常出现在组件事件监听或原生事件监听里，作用是把事件负载继续传给你自己的处理函数。
一句话定义
$event 就是“当前这次事件传过来的值或事件对象”。
最常见的两种场景
组件通过 emit 向外传值
子组件：
emit('save', formData)父组件：
<MyForm @save="handleSave($event)" />这里的 $event 就是 formData。
原生 DOM 事件对象透传
<input @input="handleInput($event)" />这里的 $event 通常是浏览器原生事件对象。
为什么它经常让人混淆
因为很多人会把“组件 emit 出来的参数”和“原生 DOM Event 对象”都统称为事件对象，但 $event 实际上只是“当前事件传进来的那个值”，不限制具体类型。
多参数时怎么理解
如果事件发出多个参数，模板里的 $event 只代表第一个参数。
这时更稳妥的写法通常是直接把方法名传进去：
<MyDialog @edit="handleEdit" />function handleEdit(goal, keyResult) {
// 依次接收多个参数
}和额外参数一起传递
<MyForm @save="handleSave(recordId, $event)" />这里 recordId 是你手动补的参数，$event 是事件本身携带的值。
常见误区
误以为 $event 永远是原生 Event
在组件事件里，它往往是子组件 emit 出来的业务数据。
多参数时还执着用 $event
如果事件会传多个参数，通常直接传方法更自然。
把简单场景写复杂
如果只是原样转发参数，很多时候方法引用本身就够了，不一定非得显式写 $event。
最短记忆方式
$event = 当前事件交给你的第一个参数。