vue教程-事件修饰符-阻止事件冒泡 .stop

上接: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>

原文出处:https://www.malaoshi.top/show_1IX2bTHzcm3t.html