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>