关键点：@click="..." 里的内容不是直接执行，而是会被“编译成函数”#

例如：

1
<button @click="count++">+</button>

你写的是一段表达式，但 Vue 编译时会把它变成类似这样的处理函数（概念化）：

1
onClick: ($event) => {
2
  count++
3
}

所以 $event 之所以“像形参”，是因为它真的是编译后函数的形参名。

那 Vue 怎么知道你用的 $event 是“形参”而不是别的变量？#

因为 Vue 在编译模板表达式时，有一条规则：

• 如果表达式处在事件监听语境（v-on / @）中
• 编译器会生成 handler 函数，并把第一个参数命名为 $event
• 同时在这段表达式里，$event 会被当作“这个 handler 的入参引用”

换句话说：这是语法规则，不是运行时猜的。

类比一下就像 for (const item of list)：item 为什么代表循环变量？因为语言规定了它在这个语法里就是。

对比三种写法，你会立刻明白作用域是谁给的#

A. 直接传函数引用（没有 $event）#

1
<button @click="onClick">点我</button>

编译后大概是：

1
onClick: onClick   // 事件对象会由浏览器传给 onClick

此时 是否接收事件对象，取决于你函数签名：

1
function onClick(e: MouseEvent) { ... }

B. 模板内联表达式，用 $event#

1
<button @click="onClick($event)">点我</button>

编译后大概是：

1
onClick: ($event) => onClick($event)

此时 $event 明确就是编译器生成的形参。

C. 你自己显式声明形参（你想叫啥都行）#

1
<button @click="(e) => onClick(e)">点我</button>

这里压根不需要 $event，因为你自己写了 e 这个形参。

那 $event 是不是“全局变量”？我能在别的地方用吗？#

不是全局变量。它只在这些地方有特殊含义：

• v-on / @xxx 的内联表达式中
• v-model 的更新表达式中（例如 @update:modelValue="x = $event"）

在普通的 <script setup> 里直接写 $event 是没有意义的，也不会自动存在。

更本质的一句话#

Vue 不是“识别 $event 这个名字”这么简单，而是：在事件绑定的语境下，Vue 必须生成一个 handler 函数；生成函数就必须有参数；$event 只是这个参数在模板表达式里的默认名字。

如果你愿意，我可以拿你截图里的这句：

@update:modelValue="username = $event"

把它“从模板 → 编译后 handler → 运行时调用时 $event 具体是什么值”完整串一遍（包含 v-model 触发 update:modelValue 的那条链路），你会更牢。