在vue中比如你给父元素设置了鼠标点击事件，父元素的儿砸也设置了点击事件，但是有时候点击了儿砸的事件但是父亲的事件也被触发了，这时候我们只想触发儿砸的点击事件，怎么办呢。
在JS中我们阻止事件冒泡与捕获时间是使用event.stopPropagation()的方法来阻止。
在vue中我们怎么阻止呢接下来我们来看在vue中怎么阻止冒泡与捕获事件的
请各位看下面代码

.stop 阻止冒泡事件

.capture 设置捕获事件

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

.once 处理函数只被触发一次

注：这些事件修饰符都是可以链式调用的

蓝色为day1
红色为day2

当我们点击了day2，day1的事件也会被执行

默认冒泡事件

 		// 这是两个点击事件
  		<div class="day1" @click="day1Click">
            <div class="day2" @click="day2Click"></div>
        </div>
        
		 export default {
		        name: "incident",
		        data(){
		            return {}
		        },
		        methods:{
		            day1Click(){
		                console.log('这是触发了day1事件');
		            },
		            day2Click(){
		                console.log('这是触发了day2事件');
		            }
		        }
		    }
		    

解决方案

阻止冒泡事件

		
   			<!--使用 .stop  阻止冒泡事件-->
            <!--很简单只需要在点击事件后面加上  .stop  就ok了-->
			<div class="day1" @click="day1Click">
           		 <div class="day2" @click.stop="day2Click"></div>
        	</div>

现在再来刷新页面再点击一次

设置捕获事件

捕获：函数从外到内执行 比如点击day2标签先执行day1的方法再执行day2的方法
如果你想设置捕获事件也很简单

		<!--使用 .capture  设置捕获事件  需要给父级元素添加 -->
        <!--很简单只需要在点击事件的父元素后面加上  .capture  就ok了-->
        <div class="day1" @click.capture="day1Click">
            <div class="day2" @click="day2Click"></div>
        </div>

只有点击自己本身才触发事件，什么冒泡，捕获我统统都不能执行这个事件

		<!--使用 .self 实现只有点击当前元素的时候，才会触发处理函数 -->
        <!--只需要在当前元素的点击事件的后面加上  .self  就ok了-->
        <div class="day1" @click.self="day1Click">
            <div class="day2" @click="day2Click"></div>
        </div>

事件只触发一次

设置 .once 之前
点击 day1 可以看到你点击多少次，day1的函数就会执行多少次

		<div class="day1" @click.self="day1Click">
            <div class="day2" @click="day2Click"></div>
        </div>

设置 .once 之后
点击day1 可以看到无论点击多少次day1，它的函数都只会执行一次

    <!--使用 .once 实现点击当前元素的时候，处理函数只被触发一次 -->
    <!--只需要在当前元素的点击事件的后面加上  .once  就ok了-->
    <div class="day1" @click.self.once="day1Click">
        <div class="day2" @click="day2Click"></div>
    </div>