v-on 用于监听子组件通过 $emit 触发的自定义事件，而非响应式监听值变化；父组件需用 kebab-case 形式（如 @user-updated）绑定事件处理器，并按需接收参数或事件对象。
在 Vue Options API 中，v-on 本身不直接“监听自定义事件的变化”，而是用于**监听由子组件通过 $emit 主动触发的自定义事件**。它不是响应式地观察某个值的变更（像 watch 那样），而是基于事件驱动模型，实现父子组件间的通信。
监听子组件发出的自定义事件
这是 v-on 在 Options API 中最标准、最常用的场景：
- 子组件内部调用
this.$emit('event-name', payload)触发事件 - 父组件在使用该子组件时，用
v-on:event-name="handler"或简写@event-name="handler"接收 - handler 必须在父组件的
methods中定义，或为内联函数
注意事件名大小写与 kebab-case 规则
Vue 对自定义事件名有明确约定：
- 子组件中触发时用驼峰或短横线均可（
this.$emit('userUpdated')或this.$emit('user-updated')） - 但父组件监听时，必须用 kebab-case 形式（即全小写+短横线），且 DOM 模板中会自动转为小写
- 例如：
@user-updated="onUserChange"✅；@userUpdated="..."❌（在 DOM 模板中无效）
接收参数和事件对象
子组件可传任意参数（推荐传一个对象，便于扩展），父组件方法按需接收：
- 只接收载荷：
@user-updated="handleUpdate"→handleUpdate(payload) { ... } - 同时需要原生事件对象：
@user-updated="handleUpdate($event)"→handleUpdate(payload) { ... }（此时$event就是传入的 payload） - 若还需额外上下文，可显式传参：
@user-updated="handleUpdate('from-list', $event)"
配合 .native 修饰符监听根元素原生事件（慎用）
当子组件模板的根元素是普通 HTML 元素（如 <input>），且你想监听其原生事件（如 focus），可用：
<my-input></my-input>- ⚠️ 注意：若子组件根元素后来改为
<label></label>等非目标元素，.native会静默失效 - 更可靠的方式是子组件主动
$emit('focus')，再由父组件@focus监听
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
