Vue 提供了一些修饰符，用于对指令行为进行增强或修改。以下是一些常用的 Vue 修饰符：
1. .prevent
阻止默认事件的发生。
<form @submit.prevent="onSubmit">...</form>
2. .stop
阻止事件冒泡。
<div @click.stop="onClick">...</div>
3. .capture
事件侦听器会在捕获阶段触发。
<div @click.capture="onClick">...</div>
4. .self
只当事件是从侦听器绑定的元素本身触发时才触发回调。
<div @click.self="onClick">...</div>
5. .once
事件只触发一次。
<button @click.once="onClick">...</button>
6. .passive
指示事件的默认行为不会被阻止。
<div @touchstart.passive="onTouchStart">...</div>
7. .native
监听组件根元素的原生事件。
<MyComponent @click.native="onClick">...</MyComponent>
8. .sync
用于在子组件中更新父组件的值。
<!-- 子组件 -->
<button @click="$emit('update:isOpen', !isOpen)">Toggle</button>
<!-- 父组件 -->
<ChildComponent :isOpen.sync="isOpen"></ChildComponent>
这些修饰符可以用于事件监听、表单输入等场景中，提供了灵活的方式来控制事件的行为或者简化某些操作。
Was this helpful?
0 / 0