vue 修饰符

<template>
  <div>
    <!-- .prevent 修饰符防止默认行为 -->
    <form @submit.prevent="onSubmit">
      <button type="submit">Submit</button>
    </form>

    <!-- .stop 修饰符阻止事件冒泡 -->
    <div @click="divClick">
      <button @click.stop="buttonClick">Click me</button>
    </div>

    <!-- .once 修饰符只触发一次事件 -->
    <button @click.once="onClickOnce">Click me only once</button>

    <!-- .capture 修饰符在捕获阶段触发事件处理函数 -->
    <div @click.capture="handleCaptureClick">
      <button @click="handleClick">Click me</button>
    </div>

    <!-- .self 修饰符只有当事件是从侦听器绑定的元素本身触发时才触发回调 -->
    <div @click.self="onlyDivClick">
      <button @click="buttonClick">Click me</button>
    </div>

    <!-- .passive 修饰符用于滚动事件，提升性能 -->
    <div @scroll.passive="handleScroll"></div>
  </div>
</template>

<script>
export default {
  methods: {
    onSubmit() {
      console.log('Form submitted');
    },
    divClick() {
      console.log('Div clicked');
    },
    buttonClick() {
      console.log('Button clicked');
    },
    onClickOnce() {
      console.log('Button clicked once');
    },
    handleCaptureClick() {
      console.log('Capture phase click');
    },
    handleClick() {
      console.log('Bubble phase click');
    },
    onlyDivClick() {
      console.log('Only div clicked');
    },
    handleScroll() {
      console.log('Scrolled');
    }
  }
};
</script>

解释说明

1. .prevent：防止表单提交的默认行为。
2. .stop：阻止点击事件冒泡到父级元素。
3. .once：确保点击事件只触发一次。
4. .capture：在捕获阶段（而不是冒泡阶段）触发事件处理函数。
5. .self：只有当事件从绑定的元素本身触发时才触发回调。
6. .passive：用于滚动事件，提升性能，表示不会调用 event.preventDefault()。

这些修饰符可以帮助你更精确地控制事件的行为。