上接：vue教程-事件修饰符介绍

提出问题

下面代码中，在 div 里面有 button 按钮，而且都添加了 点击事件，触发事件时，先执行 button 按钮的事件，然后执行 div 的事件

实际上：我们只想执行 button 按钮的事件

<div id="app" @click="show2">
    <input type="button" @click="show" value="弹出对话框1">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ // 在 methods 对象中定义方法
        show:function(event){
            alert("button事件")
        },
        show2:function(event){
            alert("div事件")
        }
    }
})
</script>

解决

在 按钮事件修改为 @click.stop ，可阻止事件冒泡，不执行 外部 div 的事件

<div id="app" @click="show2">
    <input type="button" @click="show" value="弹出对话框1">
    <input type="button" @click.stop="show" value="弹出对话框2">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
    el: '#app',
    methods:{ // 在 methods 对象中定义方法
        show:function(){
            alert("button事件")
        },
        show2:function(){
            alert("div事件")
        }
    }
})
</script>