vue 事件修饰符.stop/.capture/.self

<div @click="clickDad">
    父
    <div @click="clickSun">子</div>
</div> 点击子，先触发 子， 再触发 父

<div @click="clickDad">
    父
    <div @click.stop="clickSun">子</div>
</div>

点击子，只触发 子， 不触发 父

 <div @click.capture="clickDad">
    父
    <div @click="clickSun">子</div>
</div>

点击子，先触发 父， 再触发 子

 <div @click.self="clickDad">
    父
    <div @click="clickSun">子</div>
</div>

点击子，只触发 子， 不触发 父

以上，建议子元素用.stop 阻止冒泡，使用.self点击除了子元素之外的元素 ，父元素的点击事件都不生效，.capture只是改变冒泡的顺序