Vue中@click的常见修饰符_vue click修饰符

在 Vue 的@click事件中，可以使用以下修饰符：

1. .stop：阻止事件继续传播。
2. .prevent：阻止默认事件。
3. .capture：使用事件捕获模式。
4. .self：只当事件是从侦听器绑定的元素本身触发时才触发回调。
5. .once：只触发一次回调。
6. .passive：告诉浏览器该事件无需阻止默认行为，可以提高页面的滚动性能。

例如，在模板中，我们可以这样使用@click.stop修饰符：

<button @click.stop="onClick">Click Me</button>

这将阻止该事件向父级传播，确保只有该按钮的点击事件被触发。

1. .stop：阻止事件继续传播

<div @click="handleClick">
    <button @click.stop="handleButtonClick">Button</button>
</div>

上面的代码中，当我们点击按钮时，事件不会继续传播到包含该元素的 div 上，也就是说不会触发 handleClick 方法。

1. .prevent：阻止默认的行为

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

上面的代码中，我们使用 @submit.prevent 修饰符阻止了表单的默认提交行为，而是执行了 handleFormSubmit 方法。

1. .capture：捕获模式下触发

<div @click.capture="handleContainerClick">
    <button @click="handleButtonClick">Button</button>
</div>

使用 @click.capture 修饰符可以将事件处理程序添加到捕获模式下，这意味着在目标元素之前处理该事件。在上面的代码片段中，当我们点击按钮时，会先触发 handleContainerClick 方法，再触发 handleButtonClick 方法。

1. .self：只在事件的目标元素本身触发时才触发回调函数

<div @click="handleClick">
    <button @click.self="handleButtonClick">Button</button>
</div>

使用 @click.self 修饰符可以确保只有在按钮本身被点击时才会触发 handleButtonClick 方法，不会影响到包含按钮的 div 元素。

1. .once：只会触发一次回调函数

<button @click.once="handleButtonClick">Button</button>

使用 @click.once 修饰符可以确保只有首次点击按钮时才会触发 handleButtonClick 方法，而后续的点击都不会再次触发。

1. .passive：不会阻止默认事件，但是可以提高性能

<div @touchmove.passive="handleTouchMove">
    <!-- ... -->
</div>

通过使用 @touchmove.passive 修饰符，Vue 可以告诉浏览器该事件不需要阻止默认行为，从而提高页面的滚动性能。

总之，在 Vue 的@click事件中，使用这些修饰符可以帮助我们更好地控制事件的行为和动作，提高交互体验，并且让开发变得更加高效。