Vue事件修饰符中的 阻止事件冒泡 .stop

 用法：<a v-on:click.stop="doThis"></a>或者<a @click.stop="doThis"></a>

修饰符.stop应该放在需要阻止冒泡的位置上。

 

例：

<div id="gpa" @click="dodo">
    <div id="pa" @click="doThat">
        <a  @click.stop="doThis" href="http://www.baidu.com">百度</a>
    </div>
</div>
</body>
<script>
    var gpas = new Vue({
        el:'#gpa',
        data:{
        },
        methods:{
            doThis:function(){
                alert("doThis");
            },
            doThat:function (){
                alert("doThat")
            },dodo:function(){
                alert("dodo")
            }
        }
    })
    </script>

 

如果不加.stop 点击a的点击事件就同时也触发了div 的点击事件。