vue 如何阻止事件冒泡与设置捕获行为

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

.stop 阻止冒泡事件

.capture 设置捕获事件

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

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

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

蓝色为day1
红色为day2

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

默认冒泡事件

 		// 这是两个点击事件
  		

            

        
        
		 export default {
		        name: "incident",
		        data(){
		            return {}
		        },
		        methods:{
		            day1Click(){
		                console.log('这是触发了day1事件');
		            },
		            day2Click(){
		                console.log('这是触发了day2事件');
		            }
		        }
		    }
		    

解决方案

阻止冒泡事件

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

设置捕获事件

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

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

事件只触发一次

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

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