Vue.js 事件修饰符是一种特殊的指令，用于对事件进行定制。通过使用事件修饰符，我们可以控制事件的一些行为，例如阻止默认行为、阻止事件冒泡等等。在 Vue.js 中，事件修饰符可以极大地帮助我们提高开发效率和代码可读性。
常见的事件修饰符
.stop
.stop 是 Vue.js 中最常用的事件修饰符之一，用于防止事件冒泡。例如，在下面的示例中，点击父元素会触发 click 事件，如果我们在子元素上加上 .stop 修饰符，那么点击子元素不会再触发父元素的 click 事件。
<div @click="handleClick"> <div @click.stop="handleChildClick"></div> </div>
methods: {
handleClick() {
console.log('Clicked parent');
},
handleChildClick() {
console.log('Clicked child');
},
},.prevent
.prevent 用于防止默认行为。例如，在下面的示例中，点击链接会触发默认的跳转行为，如果我们在链接上加上 .prevent 修饰符，那么点击链接将不再触发默认的跳转行为，可以避免页面跳转。
<a href="https://www.example.com" @click="handleClick"></a>
methods: {
handleClick(event) {
event.preventDefault();
console.log('Clicked');
},
},.capture
.capture 修饰符用于将事件绑定到捕获阶段，而不是冒泡阶段。在捕获阶段中，事件从最外层的元素开始传递到目标元素，而在冒泡阶段中，事件从目标元素开始向外传递到最外层的元素。例如，在下面的示例中，如果我们在父元素上使用 .capture 修饰符，那么 click 事件将在捕获阶段触发，先于子元素的 click 事件触发。
<div @click.capture="handleClick"> <div @click="handleChildClick"></div> </div>
methods: {
handleClick() {
console.log('Captured');
},
handleChildClick() {
console.log('Bubbled');
},
},.self
.self 修饰符用于限制事件只能在目标元素本身触发，而不能在目标元素的子元素上触发。例如，在下面的示例中，如果我们在父元素上使用 .self 修饰符，那么只有在父元素本身上点击才会触发 click 事件，而在子元素上点击则不会触发。
<div @click.self="handleClick"> <div @click="handleChildClick"></div> </div>
methods: {
handleClick() {
console.log('Clicked parent');
},
handleChildClick() {
console.log('Clicked child');
},
},其他的事件修饰符
除了上面介绍的四种事件修饰符外，Vue.js 还提供了许多其他的事件修饰符。以下是一些常用的事件修饰符：
- .once：只触发一次事件。
- .passive：指示浏览器不用等待事件处理程序完成，从而提高页面滚动的性能。
- .native：绑定原生事件，用于监听非组件元素的事件。
总结
事件修饰符是 Vue.js 中非常有用的指令，通过使用事件修饰符，我们可以控制事件的行为，提高页面的交互性和性能。在开发过程中，我们应该熟练掌握常见的事件修饰符，并在恰当的时候使用它们来优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472f74b968c7c53b00814d4