前端Vue日常工作中--Vue事件修饰符

前端Vue日常工作中--Vue事件修饰符

1..stop: 阻止事件冒泡

修饰符用于阻止事件冒泡，即防止事件从子组件冒泡到父组件，相当于调用 event.stopPropagation()。

<!-- 防止点击事件冒泡到父元素 -->
<el-button @click.stop="handleClick">Click me</el-button>

<template>
  <div @click="handleParentClick">
    <!-- 点击按钮时阻止事件冒泡 -->
    <el-button @click.stop="handleButtonClick">Click me</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('按钮点击');
    },
    handleParentClick() {
      console.log('父组件点击');
    },
  },
};
</script>

当点击按钮时，@click.stop 修饰符会阻止点击事件冒泡到父元素，因此不会触发 handleParentClick 方法。如果去掉 .stop 修饰符，点击按钮时会触发父元素的点击事件。

2..prevent: 阻止事件的默认行为

修饰符用于阻止事件的默认行为，即防止事件触发默认的浏览器行为，相当于调用 event.preventDefault()。

<!-- 阻止表单提交的默认行为 -->
<el-form @submit.prevent="handleSubmit"></el-form>

<template>
  <div>
    <!-- 阻止表单提交的默认行为 -->
    <el-form @submit.prevent="handleSubmit">
      <el-button type="primary" native-type="submit">Submit</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      console.log('表单提交');
      // 阻止表单的默认提交行为
      // 通过 @submit.prevent 已经阻止了默认行为，所以这里不需要再调用 event.preventDefault()
    },
  },
};
</script>

@submit.prevent 修饰符会阻止表单提交的默认行为，即页面不会因为表单提交而刷新。这是通过调用 event.preventDefault() 来实现的。.prevent 修饰符提供了一种简洁的方式，避免在方法中手动调用 event.preventDefault()。

3..capture: 使用事件捕获模式

添加事件监听器时使用事件捕获模式。可以将事件监听器添加到事件捕获阶段，而不是默认的事件冒泡阶段。

<!-- 在捕获阶段处理点击事件 -->
<el-button @click.capture="handleCapture">Click me</el-button>

<template>
  <div>
    <!-- 在捕获阶段处理按钮的点击事件 -->
    <el-button @click.capture="handleCaptureClick">Click me</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleCaptureClick() {
      console.log('按钮捕获事件');
    },
  },
};
</script>

@click.capture 修饰符将事件监听器添加到按钮的点击事件的捕获阶段。这意味着事件处理函数 handleCaptureClick 会在按钮的点击事件传播到目标元素之前被触发。在实际应用中，通常情况下我们使用的是事件冒泡阶段，而不是事件捕获阶段。.capture 修饰符在特定场景下使用，可以用于处理特殊需求。

4..self: 元素本身触发时才触发回调

只当事件是从侦听器绑定的元素本身触发时才触发回调。用于确保事件只有在绑定事件的元素本身触发时才会触发回调，而不是在其子元素触发时。

<!-- 只处理按钮本身的点击事件，而不是其子元素的点击事件 -->
<el-button @click.self="handleClick">Click me</el-button>

<template>
  <div @click.self="handleClickOutside">
    <el-button @click="handleButtonClick">Click me</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('按钮点击');
    },
    handleClickOutside() {
      console.log('外部点击');
    },
  },
};
</script>

@click.self 修饰符确保只有在点击 div 元素本身时，才会触发 handleClickOutside 方法，而不是在点击按钮时触发。如果去掉 .self 修饰符，点击按钮时也会触发 handleClickOutside 方法，因为按钮是 div 的子元素。

5..once: 事件只触发一次

修饰符用于确保事件只触发一次。一旦事件被触发后，事件监听器将被自动移除。

<!-- 只允许按钮点击一次 -->
<el-button @click.once="handleClick">Click me once</el-button>

<template>
  <div>
    <!-- 点击按钮时事件只会触发一次 -->
    <el-button @click.once="handleClickOnce">Click me once</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClickOnce() {
      console.log('触发一次');
    },
  },
};
</script>

@click.once 修饰符确保 handleClickOnce 方法只会在第一次点击按钮时被触发，之后再点击按钮不会再触发该方法。这在一些需要确保事件只执行一次的场景中很有用，例如执行一次性的初始化逻辑。

.once (自定义事件): 在2.1.8+版本中，.once 修饰符也可以用于自定义事件。

  <!-- 自定义事件只触发一次 -->
  <my-component @custom-event.once="handleCustomEvent"></my-component>

<template>
  <div>
    <!-- 自定义事件只触发一次 -->
    <el-button @custom-event.once="handleCustomEvent">Trigger Custom Event</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomEvent() {
      console.log('自定义事件触发一次');
      // 处理自定义事件的逻辑
    },
  },
};
</script>

@custom-event.once 修饰符确保 handleCustomEvent 方法只在第一次触发 custom-event 事件时被执行，之后再次触发 custom-event 事件时将不再执行。这种方式可以用于确保某个特定的自定义事件只执行一次，适用于一次性的操作或初始化逻辑。

6..passive:提示浏览器不想阻止事件的默认行为,用于提高性能

提示浏览器你不想阻止事件的默认行为。 修饰符用于提示浏览器不需要等待事件处理函数执行完毕才继续进行默认行为。这在优化性能时可以提供一些帮助。请注意，.passive 修饰符通常用于处理滚动等高频触发的事件。

<!-- 使用.passive优化滚动性能 -->
<el-container @scroll.passive="handleScroll">...</el-container>

<template>
  <div>
    <!-- 使用.passive优化滚动性能 -->
    <el-container @scroll.passive="handleScroll">...</el-container>
  </div>
</template>

<script>
export default {
  methods: {
    handleScroll() {
      console.log('正在滚动容器');
      // 这里执行滚动时的逻辑
    },
  },
};
</script>

@scroll.passive 修饰符提示浏览器在滚动时不需要等待 handleScroll 方法执行完毕才进行默认的滚动操作。这有助于提高滚动性能，特别是在需要频繁触发滚动事件的情况下。

.passive 修饰符的使用场景通常限于高频触发的事件，并且不应该在可能会阻止默认行为的情况下使用。

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

修饰符用于在组件根元素上监听原生事件。这对于在使用 Vue.js 组件时，需要监听组件根元素的原生事件时非常有用。

<!-- 监听组件根元素的原生点击事件 -->
<el-dialog @click.native="handleDialogClick"></el-dialog>

<template>
  <div>
    <!-- 监听对话框的原生点击事件 -->
    <el-dialog @click.native="handleDialogClick">
      <span>Click me</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    handleDialogClick() {
      console.log('已单击对话框根元素');
      // 这里执行点击对话框根元素时的逻辑
    },
  },
};
</script>

@click.native 修饰符使得 handleDialogClick 方法能够监听对话框组件根元素的原生点击事件。通常情况下，Vue.js 组件会封装一些功能，并且在组件内部处理一些事件，但有时候我们可能需要直接监听组件根元素上的原生事件，这时 .native 修饰符就派上用场了。

8..keyCode/.key: 限制处理事件的 keyCode 或 key。

.keyCode 修饰符用于限制处理事件的 keyCode，而.key 修饰符用于限制处理事件的键值。请注意，.keyCode 在 Vue.js 2.1.8+ 版本中已被废弃，推荐使用 .key 修饰符。

<!-- 按下回车键触发事件 -->
<el-input @keyup.enter="handleEnter"></el-input>

<template>
  <div>
    <!-- 按下回车键触发事件 -->
    <el-input @keyup.enter="handleEnterKey"></el-input>
    
    <!-- 按下 A 键触发事件 -->
    <el-button @click.key="handleAKey">Click me with A key</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleEnterKey() {
      console.log('按下回车键');
      // 处理按下回车键时的逻辑
    },
    handleAKey() {
      console.log('按下 A 键');
      // 处理按下 A 键时的逻辑
    },
  },
};
</script>

@keyup.enter 修饰符确保 handleEnterKey 方法只在按下回车键时触发。而 @click.key="handleAKey" 修饰符确保 handleAKey 方法只在按下 A 键时触发。这种方式可以用于限制处理特定键盘按键的情况，适用于需要根据键盘输入执行不同逻辑的场景。

9..left/.right/.middle: 仅当点击鼠标左/右/中键时触发。

.left、.right 和 .middle 修饰符用于限制处理鼠标点击事件时的鼠标按钮。.left 表示左键，.right 表示右键，.middle 表示中键。

<!-- 仅处理鼠标左键点击事件 -->
<el-button @mousedown.left="handleLeftClick">Left Click</el-button>

<template>
  <div>
    <!-- 仅处理鼠标左键点击事件 -->
    <el-button @mousedown.left="handleLeftClick">Left Click</el-button>

    <!-- 仅处理鼠标右键点击事件 -->
    <el-button @mousedown.right="handleRightClick">Right Click</el-button>

    <!-- 仅处理鼠标中键点击事件 -->
    <el-button @mousedown.middle="handleMiddleClick">Middle Click</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLeftClick() {
      console.log('鼠标左键点击');
    },
    handleRightClick() {
      console.log('鼠标右键点击');
    },
    handleMiddleClick() {
      console.log('鼠标中键点击');
    },
  },
};
</script>

@mousedown.left 修饰符确保 handleLeftClick 方法只在鼠标左键点击时触发，而 @mousedown.right 和 @mousedown.middle 分别确保只在鼠标右键和中键点击时触发相应的方法。这样可以根据鼠标点击的按钮执行不同的逻辑。

10..stop.prevent: 同时阻止事件冒泡和默认行为。

.stop.prevent 修饰符同时阻止事件冒泡和默认行为，即相当于调用 event.stopPropagation() 和 event.preventDefault()。

<!-- 阻止按钮点击事件的冒泡和默认行为 -->
<el-button @click.stop.prevent="handleButtonClick">Click me</el-button>

<template>
  <div>
    <!-- 阻止按钮点击事件的冒泡和默认行为 -->
    <el-button @click.stop.prevent="handleButtonClick">Click me</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('鼠标点击');
      // 这里执行点击按钮时的逻辑
    },
  },
};
</script>

@click.stop.prevent 修饰符确保 handleButtonClick 方法既阻止了按钮点击事件的冒泡，也阻止了默认行为（例如，防止按钮点击导致表单提交）。.stop.prevent 修饰符提供了一种简便的方式，同时阻止事件冒泡和默认行为，避免在方法中手动调用 event.stopPropagation() 和 event.preventDefault()。

11..sync: 在子组件中更新一个由父组件传递的 prop

修饰符用于在子组件中更新一个由父组件传递的 prop，以简化语法。当子组件更新了 prop 的值时，父组件的相应数据也会被更新。

<!-- 阻止事件冒泡和默认行为 -->
<child :foo.sync="bar"></child>
<!--在子组件中，可以通过 `this.$emit('update:foo', newValue)` 来通知父组件更新。-->

<template>
  <div>
    <!-- 父组件中的数据，通过 .sync 更新 -->
    <el-input :value.sync="parentData"></el-input>

    <!-- 子组件 -->
    <child-component :data.sync="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'Initial value',
    };
  },
};
</script>

父组件中的 parentData 通过 :value.sync 传递给了 el-input 组件，并且同样通过 :data.sync 传递给了 child-component 子组件。在子组件中，可以直接修改 data 的值，这会同时更新父组件中的 parentData。这使得在子组件中更新父组件的数据变得更加简便。请注意，.sync 修饰符只是一种语法糖，实际上它是通过 :prop 和 @update:prop 这两个属性进行双向绑定实现的。

12..exact: 按键组合的触发条件。

修饰符用于控制由 exact 修饰的按键组合的触发条件。在通常情况下，Vue.js 会检查按键组合的顺序，但使用 .exact 修饰符后，要求按键的顺序与修饰符的顺序一致。

 <!-- 需要同时按下 Alt 和 A 键 -->
 <el-button @click.ctrl.exact="handleCtrlClick">Ctrl + Click</el-button>

<template>
  <div>
    <!-- 只有在按下 Ctrl 键时触发事件 -->
    <el-button @click.ctrl.exact="handleCtrlClick">Click with Ctrl</el-button>

    <!-- 只有在按下 Shift 键时触发事件 -->
    <el-button @click.shift.exact="handleShiftClick">Click with Shift</el-button>

    <!-- 同时按下 Ctrl 和 Shift 键时触发事件 -->
    <el-button @click.ctrl.shift.exact="handleCtrlShiftClick">Click with Ctrl and Shift</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleCtrlClick() {
      console.log('按下 Ctrl 键时触发事件');
    },
    handleShiftClick() {
      console.log('按下 Shift 键时触发事件');
    },
    handleCtrlShiftClick() {
      console.log('按下 Ctrl 和 Shift 键时触发事件');
    },
  },
};
</script>

通过使用 .exact 修饰符，确保事件只有在按下指定的按键组合时才会触发。如果不使用 .exact，那么在同时按下 Ctrl 和 Shift 键的情况下，同时按下其他键也会触发事件。.exact 修饰符确保只有在指定的按键组合下才会触发事件。@click.ctrl.exact 修饰符要求同时按下 Ctrl 键和 A 键时才会触发 handleCtrlClick 方法。如果按键的顺序不一致，例如先按下 A 键再按下 Ctrl 键，事件将不会触发。.exact 修饰符对于需要确保按键的顺序的场景非常有用。

.exact (2.5.0+版本): .exact 修饰符也可以用于鼠标按钮的点击事件。

  <!-- 需要同时按下左键和右键 -->
  <el-button @click.left.exact="handleLeftAndRightClick">Left and Right Click</el-button>

 <template>
   <div>
     <!-- 只有在左键点击时触发事件 -->
     <el-button @mousedown.left.exact="handleLeftClick">Left Click</el-button>
 
     <!-- 只有在右键点击时触发事件 -->
     <el-button @mousedown.right.exact="handleRightClick">Right Click</el-button>
 
     <!-- 同时按下左键和右键时触发事件 -->
     <el-button @mousedown.left.right.exact="handleLeftAndRightClick">Left and Right Click</el-button>
   </div>
 </template>
 
 <script>
 export default {
   methods: {
     handleLeftClick() {
       console.log('左键点击时触发事件');
     },
     handleRightClick() {
       console.log('右键点击时触发事件');
     },
     handleLeftAndRightClick() {
       console.log('按下左键和右键时触发事件');
     },
   },
 };
 </script>
 

通过使用 .exact 修饰符，确保事件只有在按下指定的鼠标按钮组合时才会触发。如果不使用 .exact，那么在同时按下左键和右键的情况下，同时按下其他鼠标按钮也会触发事件。.exact 修饰符确保只有在指定的鼠标按钮组合下才会触发事件。