vue之.stop修饰符

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

.stop修饰符用于阻止事件冒泡，即阻止事件的继续传播。

什么是冒泡？ 事件是监听在某个DOM元素上的，但是js的DOM事件有捕获和冒泡的机制，所以事件处理不是我们想的那样简单。即事件开始是由最具体的元素接收，然后逐层向上级传播到较为不具体的元素。

<div id="app" class="divDefault">
	<div id="div1" @click="divHandlerClick">
		<input type="button" value="单击" @click="btnHandlerClick" />
	</div>
	</div>
	<script>
		var vm =new Vue({
		el:'#app',
		data:{},
		methods:{
			divHandlerClick(){
				alert('我是div的单击事件！')
			},
			btnHandlerClick(){
				alert('我是button的单击事件！')
			}	
		}
		}) ;
	</script>

上述代码中创建了一个button的单击事件和外侧的div的单击事件。根据事件的冒泡机制可知，当单击了按钮之后，会扩散到父元素，从而触发父元素的单击事件。也就是说，代码的执行结果是会先弹出“我是button的单击事件”窗口，然后弹出“我是div的单击事件”窗口。

那么如何阻止事件冒泡呢？

1.原生JS做法

一开始对的方法就是利用原生JS做法，单击的方法需要传入$event事件对象，然后在方法内部调用事件对象的stopPropagation()方法。

（1）首先需要使用@click方法传入$event,代码如下：

<input type="button" value="单击" @click="btnHandlerClick($event)" />

（2）处理单击按钮事件的方法，先要有一个形参对象用于接收单击时传来的事件，然后在使用stopPropagation()方法组织事件冒泡。

btnHandlerClick(e){
alert('我是button的单击事件');
e.stopPropagation()
}

2.采用Vue的.stop事件修饰符

<input type="button" value="单击" @click.stop="btnHandlerClick" />

原生JS做法有点麻烦，如果不希望出现事件冒泡，可以使用Vue内置的修饰符方便的阻止事件冒泡的产生。因为是单击button后产生事件冒泡，所以只需在button的单击事件上加.stop修饰符就可以了。