面试题：Vue中常见的事件修饰符有哪些及应用场景

Question

请列举Vue中至少5个常见的事件修饰符，并分别说明它们适用的业务场景。例如，在一个用户登录表单中，哪个修饰符可以确保提交按钮点击后阻止表单默认提交行为？

Answer 1

• .prevent：
  • 适用场景：用于阻止元素的默认行为。如在表单提交时，若不想让表单执行默认的提交操作（例如提交到服务器进行页面刷新），可在提交按钮的点击事件上使用.prevent。例如<button @click.prevent="submitForm">提交</button> 。在上述用户登录表单中，.prevent修饰符可以确保提交按钮点击后阻止表单默认提交行为。
• .stop：
  • 适用场景：用于阻止事件冒泡。当元素嵌套多层，且每层元素都绑定了相同类型事件（如点击事件）时，若不想让内层元素触发的事件传递到外层元素，就可以使用.stop。比如一个列表项内有一个删除按钮，不想删除按钮点击事件冒泡到列表父元素触发列表的点击事件，可写为 <button @click.stop="deleteItem">删除</button> 。
• .self：
  • 适用场景：只有当事件在该元素本身（而不是子元素）触发时才会执行回调。常用于希望元素只响应自身事件，而忽略子元素传递上来的事件情况。例如 `<div @click.self="handleClick">

    子元素

  ` ，此时点击 `

  ` 标签不会触发 `handleClick` 方法，只有点击 `

  ` 自身才会触发。
• .once：
  • 适用场景：事件只触发一次。适用于一些只需要用户操作一次的场景，比如引导提示框的关闭按钮，用户点击关闭后，下次再打开提示框，关闭按钮的点击事件就不再需要重复绑定执行相同逻辑，可写为 <button @click.once="closeGuide">关闭引导</button> 。
• .capture：
  • 适用场景：使用事件捕获模式。一般事件是从子元素向父元素冒泡传递，而使用.capture修饰符后，事件会先从父元素向子元素捕获传递。常用于需要在事件到达目标元素之前先进行处理的场景，如全局的事件监听和预处理。例如 `<div @click.capture="handleGlobalClick"> 按钮
  ` ，点击按钮时，`handleGlobalClick` 方法会先于按钮自身绑定的点击事件执行。