一、阻止冒泡事件修饰符
什么是冒泡事件？在div嵌套的条件下，给所有div同时绑定click事件，点击最里面的div事件会一层一层由内向外触发父div的事件。事件从最里层的后代div逐层传出，这部分我们叫冒泡过程。
如何阻止事件冒泡，在vue修饰符中有一个指令为“ .stop” ,为内层的div绑定该指令，则可以解决冒泡事件。代码如下：
@click.stop="btnclick"
<body>
<div class="inner" @click="divclick" >
<input type="button" value="点击" @click.stop="btnclick">
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:".inner",
data:{
msg:‘触发了事件input‘,
msg1:‘触发了事件div‘
},
methods:{
btnclick(){ // 该方法 等同于btnclick:function(){ }，简写省略了其中的 :function
console.log(this.msg);
},
divclick(){
console.log(this.msg1);
}
}
})
原文：https://www.cnblogs.com/starwei/p/12485744.html