VUE事件修饰符

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)。