Vue 3 事件修饰符

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>

上述代码中，只有第一个链接可以正常跳转，后面两个链接都被阻止了。