vue事件修饰符

1.once：设置事件只能触发一次

2.stop：阻止事件冒泡

3.capture：捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

4.self：将事件绑定到自身，只有自身才能触发

5.prevent：阻止默认事件的发生

vue3示例如下：

<template>
  <div  @click="div" class="green">
  <button @click="btn">无事件修饰符</button>
  </div>
  <div  @click="div" class="green">
  <button @click.once="btn">once</button>
  </div>
  <div  @click="div" class="green">
  <button @click.stop="btn">stop</button>
  </div>
  <div  @click.capture="div" class="green">
  <button @click="btn">capture</button>
  </div>
  <div  @click.self="div" class="green">
  <button @click="btn">self</button>
  </div>
  <a href="www.baidu.com" @click.prevent>百度</a>
</template>

  import {ref,reactive} from 'vue'
  export default {
    setup () {
        const num = ref(0)
        function add(){
          num.value ++
        }
        function btn(){
          console.log('btn');
        }
        function div(){
          console.log('div');
        }
      return {
          btn,
          div
      }
    }
  }

点击“无事件修饰符”按钮时的结果：

 点击两次“once”按钮时的结果：

        btn只触发一次

 点击“stop”按钮时的结果：

        button标签的点击事件使用了stop，点击button无法触发div

 点击“capture”按钮时的结果：

         先触发div，再触发btn，与冒泡方向相反，从外到内

  点击“self”按钮时的结果：

        div标签的点击事件使用了self，点击button无法触发div

 点击“百度”按钮时不会跳转