Vue 3 事件修饰符
一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 - 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/
截止目前， 星球 内专栏累计输出 66w+ 字，讲解图 2896+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2300+ 小伙伴加入学习 ，欢迎点击围观
Vue 3 提供了一些事件修饰符，用于修改事件监听器的行为。以下是一些常见的事件修饰符：
.stop：阻止事件冒泡。.prevent：阻止事件的默认行为。.capture：事件捕获模式，事件从外部元素向内部元素传播时触发。.self：只在当前元素自身触发事件时才调用事件处理函数。.once：事件只会触发一次。
<!-- 阻止单击事件冒泡 -->
<a @click.stop="clickMe"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="clickTwo"></div>
<!-- 只有当事件在该元素本身（非子元素）触发时触发回调 -->
<div @click.self="clickThree"></div>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 修饰符串联模式 -->
<a @click.stop.prevent="clickFour"></a>
示例代码
<template>
<a href="https://www.quanxiaoha.com">犬小哈教程</a><br>
<a href="https://www.quanxiaoha.com" @click.prevent="goXiaohaWebsit1">犬小哈教程</a><br>
<a href="https://www.quanxiaoha.com" @click="goXiaohaWebsit2($event)">犬小哈教程</a>
</template>
<script setup>
const goXiaohaWebsit1 = () => {
}
const goXiaohaWebsit2 = (e) => {
// 阻止
e.preventDefault();
}
</script>
上述代码中，只有第一个链接可以正常跳转，后面两个链接都被阻止了。
