一、事件绑定基础（v-on/@）
1. 基本语法
<button v-on:click="handleClick">点击</button> <!-- 简写 --> <button @click="handleClick">点击</button><script setup lang="ts"> const handleClick = () => { console.log('clicked') } </script>要点
@是v-on:的语法糖Vue 3 中事件函数通常定义在
setup()或<script setup>中事件名默认是DOM 原生事件
2. 内联事件表达式
<button @click="count++">+</button> <p>{{ count }}</p>const count = ref(0)说明
可直接写 JS 表达式
适合简单逻辑，不建议写复杂业务
二、事件参数与$event
1. 获取事件对象
<button @click="handleClick">点击</button>const handleClick = (event: MouseEvent) => { console.log(event.target) }Vue 会自动注入$event
2. 同时传自定义参数 + 事件对象
<button @click="handleClick(1, $event)">点击</button>const handleClick = (id: number, event: MouseEvent) => { console.log(id, event) }三、事件修饰符（重点）
1. 阻止冒泡 / 默认行为
| 修饰符 | 作用 |
|---|---|
.stop | event.stopPropagation() |
.prevent | event.preventDefault() |
<a href="#" @click.prevent>阻止默认</a> <div @click="parent"> <button @click.stop="child">子按钮</button> </div>2. 捕获、只触发一次
| 修饰符 | 作用 |
|---|---|
.capture | 捕获阶段触发 |
.once | 只执行一次 |
<button @click.once="submit">提交</button>3. 键盘事件修饰符
<input @keyup.enter="submit" /> <input @keyup.esc="cancel" />常用键：
.enter.esc.tab.space.delete.up / down / left / right
4. 系统按键修饰符
<button @click.ctrl="doSomething">Ctrl + Click</button> <button @keyup.alt.enter="submit" />支持：
.ctrl.alt.shift.meta（Mac Command / Windows Win）
5. 鼠标按钮修饰符
<button @click.left>左键</button> <button @click.right.prevent>右键</button> <button @click.middle>中键</button>四、事件处理与 Composition API
1.setup中事件绑定（推荐）
<script setup lang="ts"> const handleSubmit = () => { console.log('submit') } </script> <template> <button @click="handleSubmit">提交</button> </template>2. 使用ref操作 DOM 绑定事件（不推荐优先）
<template> <button ref="btn">按钮</button> </template> <script setup lang="ts"> const btn = ref<HTMLButtonElement>() onMounted(() => { btn.value?.addEventListener('click', () => { console.log('native click') }) }) </script>建议
优先使用
@click仅在第三方库或特殊场景操作 DOM
五、自定义事件（组件通信，核心）
1. 子组件触发事件（emit）
<!-- Child.vue --> <script setup lang="ts"> const emit = defineEmits<{ (e: 'update', value: number): void }>() const add = () => { emit('update', 1) } </script> <template> <button @click="add">+1</button> </template>2. 父组件监听事件
<Child @update="handleUpdate" />const handleUpdate = (val: number) => { console.log(val) }3. 事件命名规范（重要）
| 场景 | 推荐 |
|---|---|
| 组件事件 | kebab-case |
| v-model | update:modelValue |
emit('update:modelValue', newValue)六、v-model本质是事件
1. v-model 等价写法
<Child v-model="value" />等价于：
<Child :modelValue="value" @update:modelValue="value = $event" />2. 多个 v-model（Vue 3 特性）
<Child v-model:title="title" v-model:visible="visible" />子组件：
emit('update:title', 'new title') emit('update:visible', true)
