Vue 事件修饰符

Vue 事件修饰符

在 Vue 中，事件修饰符允许我们在处理 DOM 事件时添加一些特殊的修饰符，以便更方便地控制事件的行为。以下是常用的 Vue 事件修饰符：

.stop

.stop 修饰符用于阻止事件冒泡，即停止事件在父元素之间的传播。

示例：

<template><div @click="parentClick"><div @click.stop="childClick">Child Element</div></div>
</template><script>
export default {methods: {parentClick() {console.log('Parent clicked');},childClick() {console.log('Child clicked');}}
};
</script>

.prevent

.prevent 修饰符用于阻止默认的事件行为，例如阻止表单提交的默认刷新页面行为。

示例：

<template><form @submit.prevent="submitForm"><!-- 表单内容 --><button type="submit">Submit</button></form>
</template><script>
export default {methods: {submitForm() {// 处理表单提交逻辑}}
};
</script>

.capture

.capture 修饰符用于将事件监听器添加到父元素上，而不是默认的冒泡阶段。

示例：

<template><div @click.capture="parentClick"><div @click="childClick">Child Element</div></div>
</template><script>
export default {methods: {parentClick() {console.log('Parent clicked');},childClick() {console.log('Child clicked');}}
};
</script>

.self

.self 修饰符用于限制事件只能由元素自身触发，而不包括子元素。

示例：

<template><div @click.self="parentClick"><div @click="childClick">Child Element</div></div>
</template><script>
export default {methods: {parentClick() {console.log('Parent clicked');},childClick() {console.log('Child clicked');}}
};
</script>