js事件默认冒泡：

      点击内层的元素会触发外层的事件。（解决方法如下：）

事件修饰符

vue提供了事件修饰符，可以修改默认的事件触发机制：

• .stop 阻止冒泡

• .prevent 阻止默认事件

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

• .once 事件只触发一次

以 .stop 为例

<div class="grandfather" @click="catchGrandfather">
    <div class="father" @click="catchFather">
        <!-- 阻止此元素向上冒泡 -->
        <div class="son" @click.stop="catchSon"></div>
    </div>
</div>

参考网站：https://www.jianshu.com/p/484bfc98e7ff