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只是改变冒泡的顺序

标签：capture,修饰符,触发,self,元素,stop,点击,vue
来源： https://blog.csdn.net/momo_mom177/article/details/123637391