Vue 事件修饰符汇总

Vue 提供了一些事件修饰符，用于在处理 DOM 事件时提供额外的控制或功能。以下是一些常用的 Vue 事件修饰符：

1. .stop：阻止事件冒泡。（内有外无）

2. .prevent：阻止事件默认行为。（阻止事件）

3. .capture：事件将在捕获阶段触发。（先外后内）

4. .self：只当事件在该元素本身触发时触发回调。

5. .once：事件将只触发一次。

6. .passive：告诉浏览器不要等待 preventDefault() 完成。

7. .native：监听组件根元素的原生事件。

8. .left：只当点击鼠标左键时触发。

9. .right：只当点击鼠标右键时触发。

10. .middle：只当点击鼠标中键时触发。

11. .exact：精确匹配监听的按键，而不是包含它们的修饰符组合。

12. .once：只触发一次。

13. .passive：滚动事件的默认行为（即滚动行为）将会立即触发。

---

提醒：一般内外包含的层设置事件，都是按照冒泡方式从内到外，除非设置capture才是按照从外到内。如果冒泡方式不要上升，就设置stop

---

.stop 事件修饰符

.stop 修饰符用于阻止事件冒泡，即停止事件在 DOM 树中向上或向下传播。

<template>
  <div>
    <div @click="outerClick">
      Outer Div
      <div @click.stop="innerClick">Inner Div</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log('Outer Div clicked');
    },
    innerClick() {
      console.log('Inner Div clicked');
    }
  }
};
</script>

在这个示例中，当点击内部的 <div> 元素时，事件会被阻止冒泡到外部的 <div> 元素，因此不会触发外部的 outerClick 方法。只有内部的 innerClick 方法会被触发。

.prevent 事件修饰符

.prevent 修饰符用于阻止事件的默认行为，例如阻止 <a> 元素的默认跳转行为或 <form> 元素的默认提交行为。

<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      console.log('Form submitted');
      // 阻止表单提交的默认行为
      // 这里可以进行自定义的表单提交逻辑
    }
  }
};
</script>

在这个示例中，当表单提交时，使用了 .prevent 修饰符来阻止表单的默认提交行为。相应地，handleSubmit 方法将被调用，但是表单不会真正提交，因为默认的提交行为被阻止了。

.capture 修饰符的示例：

<template>
  <div>
    <div @click.capture="handleCapture">
      Outer Div
      <div>
        Inner Div
        <button @click="handleClick">Click me</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleCapture() {
      console.log('Capturing phase: Outer Div clicked');
    },
    handleClick() {
      console.log('Bubbling phase: Button clicked');
    }
  }
};
</script>

在这个示例中，当点击按钮时，首先会触发外部的 <div> 元素的捕获阶段事件监听器 handleCapture，输出 'Capturing phase: Outer Div clicked'。然后再触发按钮的冒泡阶段事件监听器 handleClick，输出 'Bubbling phase: Button clicked'。

.capture 修饰符使得事件监听器在捕获阶段就能够捕获到事件，而不必等到冒泡阶段才执行，这在某些场景下非常有用。