vue3事件处理详解

一、事件绑定基础（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. 阻止冒泡 / 默认行为

<a href="#" @click.prevent>阻止默认</a> <div @click="parent"> <button @click.stop="child">子按钮</button> </div>

2. 捕获、只触发一次

<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. 事件命名规范（重要）

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)