Vue事件修饰符

在 Vue 中，事件修饰符是用于在事件处理函数上添加额外功能的特殊属性。它们可以用来控制事件的触发方式、阻止默认行为、阻止事件冒泡等。以下是一些常见的 Vue 事件修饰符：

1. .stop：阻止事件冒泡。当使用该修饰符时，事件将不会向上传播到父元素。

2. .prevent：阻止默认行为。当使用该修饰符时，默认行为（例如点击链接时的页面跳转）将被阻止。

3. .capture：使用捕获模式。当使用该修饰符时，事件处理函数将在冒泡阶段之前被触发。

4. .self：仅在当前元素上触发事件。当使用该修饰符时，事件处理函数只会在当前元素上被触发，而不会在子元素上被触发。

5. .once：只触发一次事件。当使用该修饰符时，事件处理函数只会被触发一次，然后被自动删除。

如果想要阻止执行事件默认行为——例如，当链接被单击时阻止页面的跳转——可以使用.prevent修饰符：

<a @click.prevent='handleClick'>阻止执行事件默认行为</a>

如果想要阻止事件继续传播，以避免在父级元素上触发事件，可以使用.stop修饰符：

<button @click.stop="handleClickTwo">阻止事件传播</button>

如果想要只在第一次触发事件的时候触发事件侦听器，可以使用.once修饰符：

<button @click.once="handleFirstClick">触发一次事件</button>

如果想要使用捕获模式，也就是说，事件会在传递到当前元素的下级元素前触发（而在冒泡模式中，事件会先在当前元素上触发，然后沿DOM树向上冒泡），可以使用.capture修饰符：

如果想要只监听元素自身而不是它的子元素上触发的事件（也就是说，event.target就是绑定该侦听器的元素时），可以使用.self修饰符：

.

<div @click.capture="handleSelfClick">捕获自身触发事件</div>

也可以只设置事件名和修饰符而不传入侦听器，而且可以将修饰符串联起来使用。例如，下面这个例子会阻止单击事件沿DOM树向下传递，但只在第一次触发时有效：

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发