click.stop 阻止事件冒泡

@click.stop 阻止事件冒泡

首先来看一段代码

<div>
    <div @click="tap1">
        box1
        <div @click="tap2">box2</div>
    </div>
</div>

methods: {
    tap1() {
        console.log('tap1')
    },
    tap2() {
        console.log('tap2')
    }
}

当我们点击 box2 时会同时打印 tap1 和 tap2。这就是所谓的事件冒泡。

然后我们如下修改，使用 @click.stop

<div>
    <div @click="tap1">
        box1
        <div @click.stop="tap2">box2</div>
    </div>
</div>

这时再点击 box2 只会打印 tap2，不会往上冒泡