当我们没有使用事件修饰的时候，事件可能会发生像外层溢出的情况，举个例子

<template>
    <div class="box1" @click="clickBox1">
        box1
        <div class="box2" @click="clickBox2">
            box2
            <div class="box3" @click="clickBox3">
                box3
            </div>
        </div>
    </div>
</template>

给这三个框设置一下样式，使他们颜色不相同，便于区分

<style>
    .box1{
        height: 300px;
        width: 300px;
        background-color: skyblue;
        line-height: 50px;
    }
    .box2{
        height: 200px;
        width: 200px;
        background-color: beige;
    }
    .box3{
        height: 100px;
        width: 100px;
        background-color: yellow;
    }
</style>

点击事件

<script>
export default {
  methods:{
    clickBox1(){ console.log('我是Box1');},
    clickBox2(){ console.log('我是Box2');},
    clickBox3(){ console.log('我是Box3');}
  }
}
</script>

当我们点击最里层 class="box3" 的div时，会依次触发clickBox3、clickBox2、clickBox1方法

.stop

.stop 阻止事件冒泡

还是刚刚那个例子在这里我们给Box3添加.stop事件

<div class="box3" @click.stop="clickBox3">box3</div>

这时候点击 class="box3" 盒子时，就只会触发clickBox3方法

.prevent

.prevent 阻止默认行为，提交事件不再重载页面

在这里，我们举个例子：

 <a href="https://www.baidu.com" @click="linkClick">百度链接</a>
 <a href="https://www.baidu.com" @click.prevent="linkClick">百度链接</a>
 
 linkClick(){
    console.log("百度链接");     
},

前者执行 linkClick 函数并跳转到百度页面，后者执行 linkClick 函数但不跳转页面

.once

.once 只触发一个事件处理函数

例如当使用 prevent 修饰符，会一直阻止默认行为，但使用 once 后只会阻止一次默认行为，也就是我们再次点击这个百度链接后会进行跳转

<a href="https://www.baidu.com" @click.prevent.once="linkClick">百度链接</a>

.capture

.capture 实现捕获触发事件的机制,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理

    <div class="box1" @click="clickBox1">
        <div class="box2" @click.capture="clickBox2">
            <div class="box3" @click="clickBox3">
            </div>
        </div>
    </div>

这时候点击 class="box3" 的div时，触发方法的先后顺序改变，会先执行clickBox2方法

.self

.self 只有点击当前元素的时候才会触发事件处理函数

我们将 box2 设置 .self 看看效果

发现点击box3盒子时，触发 clickBox3、 clickBox1 方法；

点击box2盒子时，触发 clickBox2、 clickBox1 方法

；即使用.self修饰符，只有点击这个方法才会触发

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

.passive

该修饰符表示就是设置{passive:true}，表示处理事件函数中不会调用preventDefault函数（如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生），就会减少了额外的监听，从而提高了性能；所以不能和.prevent修饰符一同使用，否则浏览器会报错。

注意：

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。.passive 会告诉浏览器你不想阻止事件的默认行为。

Vue 事件修饰符