128-Vue中的事件修饰符-阻止冒泡事件

128-Vue中的事件修饰符

• .stop 阻止事件冒泡(*)

• .prevent 阻止默认事件(*)

• .prevent.stop 阻止默认事件的同时阻止冒泡

• .once 阻止事件重复触发（once与stop不能一起使用，否则再次触发事件，依然会冒泡）(*)

只能触发一次，例如：抢优惠券！

<template>
    <div>
        <div class="big" @click="cb">
            <div class="small" @click="cs">
                <a href="#" @click.stop.prevent="ca">a标签</a>
            </div>
        </div>
        <button @click.once="cc">点我</button>
    </div>
</template>

<script>
export default {
    
    methods:{
        cb(){
            console.log("点击大的");
        },
        cs(){
            console.log("点击小的");
        },
        ca(){
            console.log("点击a标签");
        },
        cc(){
            console.log("点击按钮");
        }
    }

}
</script>

<style>
.big{
    width: 300px;
    height: 300px;
    background-color: pink;
}
.small{
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
</style>

 效果如下：