Vue 3 中的原生事件监听与组件事件处理完全指南
在 Vue 3 中，事件监听和事件处理是组件交互中的关键部分。Vue 提供了一套简单而强大的事件处理机制，可以方便地监听 DOM 原生事件和组件自定义事件。本篇文章将详细介绍 Vue 3 中事件的使用，包括如何监听原生事件、绑定事件处理函数、使用事件修饰符、在子组件中触发事件，以及 <script setup> 语法糖的应用。
一、原生事件监听
在 Vue 3 中，我们可以使用 v-on 指令来监听原生 DOM 事件。v-on 指令也可以缩写为 @，使得代码更加简洁。
1. 基本用法
绑定事件时，可以直接将事件名称传入 v-on 指令，并在后面跟随事件处理函数。例如，监听 click 事件：
<template><button @click="handleClick">点击我</button>
</template><script setup>
import { ref } from 'vue';const count = ref(0);function handleClick() {count.value++;console.log("按钮点击次数:", count.value);
}
</script>
解释：
@click="handleClick"表示绑定click事件，事件触发时会调用handleClick函数。- 在
handleClick函数中，我们通过count.value++来增加点击计数。
2. 传递事件参数
有时我们需要传递参数给事件处理函数。可以直接在事件处理函数调用时传入参数。
<template><button @click="handleClick('hello')">点击我</button>
</template><script setup>
function handleClick(message) {console.log("传递的参数:", message);
}
</script>
解释：
@click="handleClick('hello')"表示点击按钮时调用handleClick，并将'hello'作为参数传入。
3. 访问事件对象
如果需要访问事件对象，可以通过 $event 关键字获取。
<template><button @click="handleClick($event)">点击获取事件对象</button>
</template><script setup>
function handleClick(event) {console.log("事件对象:", event);
}
</script>
解释：
@click="handleClick($event)"中的$event代表原生事件对象。
二、事件修饰符
Vue 提供了多个事件修饰符，使事件处理更加灵活和方便。常用的修饰符包括 .stop、.prevent、.capture、.self、.once 和 .passive。
1. .stop：阻止事件冒泡
使用 .stop 可以阻止事件冒泡到父级元素。
<template><div @click="outerClick"><button @click.stop="innerClick">阻止冒泡</button></div>
</template><script setup>
function outerClick() {console.log("外层元素被点击");
}function innerClick() {console.log("内层按钮被点击");
}
</script>
解释：
- 点击按钮时，
innerClick会触发，且不会冒泡到外层的div上。
2. .prevent：阻止默认行为
使用 .prevent 可以阻止元素的默认行为，例如阻止表单提交或链接跳转。
<template><form @submit.prevent="handleSubmit"><button type="submit">提交</button></form>
</template><script setup>
function handleSubmit() {console.log("表单提交被阻止");
}
</script>
解释：
- 使用
.prevent修饰符阻止表单的默认提交行为。
3. .once：事件只触发一次
使用 .once 修饰符，事件只会触发一次，之后自动解绑。
<template><button @click.once="handleClick">点击一次</button>
</template><script setup>
function handleClick() {console.log("按钮只会被点击一次");
}
</script>
解释：
- 第一次点击按钮时，
handleClick会被调用，之后的点击将不再触发该事件。
4. 其他修饰符
.self：仅在事件从自身触发时才执行。.capture：使用事件捕获模式。.passive：为事件添加passive修饰符，一般用于滚动事件监听。
三、子组件事件传递
在组件化开发中，我们通常会在子组件中触发事件，然后通过 emit 将事件传递给父组件处理。Vue 3 中的 emit 使用更为简洁，同时可以与 <script setup> 结合，提升开发体验。
1. 子组件触发事件
在子组件中使用 emit 触发自定义事件，首先要引入 defineEmits。
ChildComponent.vue
<template><button @click="sendEvent">发送事件</button>
</template><script setup>
const emit = defineEmits();function sendEvent() {emit('customEvent', 'Hello from Child');
}
</script>
解释：
emit('customEvent', 'Hello from Child')会触发名为customEvent的事件，并传递消息'Hello from Child'。
2. 父组件监听子组件事件
父组件可以通过 v-on 或 @ 监听子组件触发的事件，并接收传递的参数。
ParentComponent.vue
<template><ChildComponent @customEvent="handleCustomEvent" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';function handleCustomEvent(message) {console.log("接收到的消息:", message);
}
</script>
解释：
@customEvent="handleCustomEvent"监听子组件触发的customEvent事件，并调用handleCustomEvent处理该事件。
四、传递事件给子组件
有时我们希望在父组件中监听子组件的原生事件（如 click），可以使用 .native 修饰符。
不过在 Vue 3 中，官方已经不再推荐使用 .native。取而代之的是直接在组件中监听事件，这会自动处理绑定到最外层元素的原生事件。
示例：直接监听子组件的原生点击事件
ChildComponent.vue
<template><button>子组件按钮</button>
</template><script setup>
</script>
ParentComponent.vue
<template><!-- 直接监听子组件的 click 事件 --><ChildComponent @click="handleChildClick" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';function handleChildClick() {console.log("子组件按钮被点击");
}
</script>
解释：
- 父组件通过
@click="handleChildClick"监听子组件的click事件，无需额外的.native修饰符。
五、给所有事件动态绑定处理函数
在某些场景中，我们需要给组件的所有事件动态地绑定处理函数。可以通过 v-on="object" 的语法，将一个包含事件处理函数的对象绑定到组件上。
<template><ChildComponent v-on="listeners" />
</template><script setup>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';const listeners = reactive({click: () => console.log("子组件被点击"),mouseover: () => console.log("鼠标移入子组件")
});
</script>
解释：
v-on="listeners"会将listeners对象中的所有事件绑定到ChildComponent上。
六、总结
本文详细介绍了 Vue 3 中的事件监听与处理，包括原生事件监听、事件修饰符、子组件事件传递与监听，以及动态绑定事件的用法。掌握这些事件处理技巧可以更灵活地实现组件间的交互，提高代码的可读性和复用性。在 Vue 3 中，配合 <script setup> 语法糖，可以让代码更加简洁易读，使开发体验更流畅。
