vue3 修饰符大全（近万字长文）

系列文章目录

TypeScript 从入门到进阶专栏

---

---

前言

本文是为了系统性的了解vue3中的修饰符，方便开发时的使用，使用修饰符可以方便地对事件进行控制和处理，提升用户体验。

---

一、事件修饰符（Event Modifiers）

1、.stop（阻止事件冒泡）

修饰符.stop是用于阻止事件冒泡的。当一个具有.stop修饰符的事件监听器被触发时，该事件将不再向上冒泡到父元素。这意味着如果一个父元素和子元素都有相同类型的事件监听器，并且点击了子元素，那么只会触发子元素的事件监听器，父元素的事件监听器将被忽略。

例如，以下代码中的点击事件只会触发handleClick方法，而不会触发父元素的事件监听器。

<template>
  <div @click="handleClick">
    <button @click.stop="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
     
  methods: {
     
    handleClick() {
     
      console.log('Button clicked');
    },
  },
};
</script>

2、.prevent（阻止事件的默认行为）

.prevent是一个修饰符，用于事件处理函数中，阻止事件的默认行为。当事件触发时，浏览器会执行默认的操作，例如提交表单、打开链接等。而使用.prevent修饰符可以阻止这些默认的行为。

使用.prevent修饰符的方式是在事件处理函数的名称后面加上.prevent，例如：

<button @click.prevent="submitForm">提交表单</button>

在上述的代码中，当按钮被点击时，submitForm函数会被调用，同时会阻止表单的默认提交行为。

3、.capture（使用事件捕获模式）

.capture 是一个事件修饰符，用于监听一个元素的捕获阶段事件。

事件捕获是浏览器在事件传播过程中的第一个阶段，它从顶层元素向下传播到目标元素。而事件冒泡是事件传播的第二个阶段，它从目标元素向上冒泡到顶层元素。

使用.capture修饰符可以让一个元素在事件捕获阶段监听某个事件，而不是在事件冒泡阶段。

例如，我们有一个父组件和一个子组件，父组件上有一个div元素和一个子组件的插槽：

<template>
  <div @click.capture="handleClick">
    <slot></slot>
  </div>
</template>

在父组件中，我们使用了.capture修饰符来监听div元素的点击事件。这意味着当我们在子组件中点击父组件的插槽时，事件会在父组件的div元素上触发，先触发父组件的事件处理函数，然后再触发子组件的事件处理函数。

<template>
  <parent-component>
    <child-component @click="handleChildClick"></child-component>
  </parent-component>
</template>

在子组件中，我们也有一个点击事件处理函数handleChildClick，它会在子组件的div元素上触发。但是因为我们使用了.capture修饰符，所以父组件的点击事件处理函数handleClick会在子组件的事件处理函数之前触发。

.capture修饰符在某些特定的场景下非常有用，可以帮助我们更好地控制事件的触发顺序和处理逻辑。

4、.self（只当事件在该元素本身（而不是子元素）触发时触发回调函数）

修饰符 .self用于限制事件只能在触发事件的元素本身上触发，而不是在子元素上触发。这意味着只有当事件直接在绑定事件的元素上触发时，才会执行事件处理函数。

例如，我们有一个父元素和一个子元素，父元素绑定了一个点击事件，子元素是父元素的一个子元素。使用 .self 修饰符可以确保点击子元素时不会触发父元素的点击事件，只有当点击父元素本身时才会触发。

<template>
  <div @click.self="handleClick">
    <div>
      Click Me
    </div