1、.stop 作用是阻止冒泡。
<template>
<div @click="clickEvent('out')">
<button @click.stop="clickEvent('in')">点击</button>
</div>
</template>
<script lang="ts">
export default {
methods: {
clickEvent(e) {
console.log(e);
//不使用.stop，点击 button 会输出 in 和 out
//使用.stop，点击button 只会输出 in
},
},
};
</script>
2、.prevent作用是阻止默认事件（比如a标签的跳转）
<template>
<a
href="https://www.zhihu.com/people/tian-fan-di-fu-97"
@click="clickEvent('a')"
>点击</a
>
</template>
<script lang="ts">
export default {
methods: {
clickEvent(e) {
console.log(e);
//不加 prevent 点击a标签 先跳转然后输出 a
//加了 prevent 点击a标签 不会跳转只会输出 a
},
},
};
</script>
3、.capture一般事件默认是自里向外冒泡，.capture修饰符的作用是反过来，由外向内捕获
<template>
<div @click.capture="clickEvent('out')">
<button @click="clickEvent('in')">点击</button>
</div>
</template>
<script lang="ts">
export default {
methods: {
clickEvent(e) {
console.log(e);
//不加 capture 点击按钮输出 in out
//加了 capture 点击按钮输出 out in
},
},
};
</script>
4、.self作用： 只有点击事件绑定的本身才会触发事件
<template>
<div
@click.self="clickEvent('out')"
style="width: 100px; height: 100px; background: pink"
>
<button @click="clickEvent('in')">点击</button>
</div>
</template>
<script lang="ts">
export default {
methods: {
clickEvent(e) {
console.log(e);
//不加 self 点击按钮输出 in out
//加了 self 点击按钮输出 in, 点击div才会输出 out
},
},
};
</script>
5、.once 作用是使点击事件只会触发一次
<template>
<div
@click="clickEvent('out')"
style="width: 100px; height: 100px; background: pink"
>
<button @click.once="clickEvent('in')">点击</button>
</div>
</template>
<script lang="ts">
export default {
methods: {
clickEvent(e) {
console.log(e);
//不加 once 每次点击按钮都会输出 in out
//加了 once 只有第一次点击按钮会输出 in out,之后再点击按钮不会输出 in,只会输出 out
},
},
};
</script>
6、.passive ,主要用来提升移动端的性能
当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件加了一个.lazy修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
警告：不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive会告诉浏览器你不想阻止事件的默认行为。
7、.native 修饰符是用来加在子组件的事件上，保证事件能执行。
<template>
// 子组件 Contact
<Contact @click.native="clickEvent('点击成功')" />
</template>
<script>
import Contact from "../components/Contact.vue";
export default {
components: {
Contact,
},
methods: {
clickEvent(e) {
console.log(e);
},
},
};
</script>
如果我们不在子组件Contact上加修饰符.native ，那么点击事件clickEvent 就不会执行，想要事件clickEvent 成功执行，就需要加上.native修饰符.
关于 .native官网解释：
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用
v-on的.native修饰符：
注意：vue3已经移除.native
v-on 的 .native 修饰符已被移除。同时，新增的 emits选项允许子组件定义真正会被触发的事件。
因此，对于子组件中未被定义为组件触发的所有事件监听器，Vue 现在将把它们作为原生事件监听器添加到子组件的根元素中 (除非在子组件的选项中设置了 inheritAttrs: false)。
