vue 事件修饰符最全详解（阻止事件冒泡、阻止默认行为...）等，一文解决你所有问题

一、修饰符的定义

在 Vue.js 中，修饰符是用于在事件处理程序中添加额外功能的特殊标记，来改变事件的行为。它们通常以点（.）开头，能够简化事件处理的逻辑。

以下是一些常用的7种事件修饰符：

1. .stop：阻止事件冒泡。
2. .prevent：阻止事件的默认行为。
3. .capture：使用事件捕获模式。
4. .self：只有当事件是从侦听器绑定的元素本身触发时才触发回调。
5. .once：只触发一次回调。
6. .passive：告诉浏览器你不想阻止事件的默认行为（通常用于滚动事件，可以提高性能）。
7. .native：监听组件根元素的原生事件（在自定义组件中使用）。

下面是每个事件修饰符的详细描述、定义以及在不同方法中的用法示例。

二、详解

1. .stop

定义：调用 event.stopPropagation()阻止事件冒泡，即阻止事件从子元素向父元素传播。

用法：当你希望事件只在当前元素上触发，而不向上传播到父元素时使用。

用法示例：点击按钮只会触发 childMethod，而不会触发 parentMethod。

<template>
  <div @click="parentMethod">
    <button @click.stop="childMethod">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      console.log('父元素被点击');
    },
    childMethod() {
      console.log('子元素被点击');
    }
  }
}
</script>

2. .prevent

定义：调用 event.preventDefault()，阻止默认事件的发生。

用法：通常用于表单提交或链接点击等场景。

示例：在这个例子中，点击提交按钮不会刷新页面，而是调用 submitForm 方法。

<template>
  <form @submit.prevent="submitForm">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      console.log('表单已提交');
    }
  }
}
</script>

3. .self

定义：只有当事件在当前元素上触发时，才会执行事件处理程序。

用法：用于防止事件在子元素上触发时执行。

示例：只有在点击父元素的空白区域时，handleClick 方法才会被调用。

<template>
  <div @click.self="handleClick">
    点击我（只有在此区域点击才会触发）
    <button>子元素</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('父元素被点击');
    }
  }
}
</script>

4. .once

定义：事件处理程序只会被调用一次。

用法：适用于只需要处理一次的事件，例如初始化操作。

示例：在这个例子中，按钮被点击后，handleClick 方法只会被调用一次。

<template>
  <button @click.once="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击一次');
    }
  }
}
</script>

5. .capture

定义：使用事件捕获模式来处理事件。

用法：在事件冒泡之前捕获事件。

示例：点击按钮会先触发 parentMethod，然后再触发 childMethod。

<template>
  <div @click.capture="parentMethod">
    <button @click="childMethod">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      console.log('父元素被点击');
    },
    childMethod() {
      console.log('子元素被点击');
    }
  }
}
</script>

6. .native

定义：用于监听原生事件。

用法：当你需要在组件上监听原生 DOM 事件时使用。

示例：handleClick 方法会在 custom-component 的原生点击事件上被调用。

<template>
  <custom-component @click.native="handleClick"></custom-component>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('原生点击事件');
    }
  }
}
</script>