1、@click.stop（阻拦变乱冒泡）
@click.stop：阻拦事故冒泡，即阻拦点击变乱从子组件向女组件流传。
案例：咱们正在女元艳外加添了一个click事故A，而且正在其高的子元艳外也加添了一个click事变B。
这时候尔念点击子元艳触领子元艳的点击变乱，但现实上会先触领子组件的事变，而后触领女组件的事变。
<div class='handle-box' @click="clickBox">
<div @click="handleClick('新删')"><text>新删</text></div>
<div @click="handleClick('修正')"><text>批改</text></div>
<div @click="handleClick('增除了')"><text>增除了</text></div>
</div>
需求运用阻拦事故冒泡（也即阻拦点击变乱持续流传）来办理此答题，
将子组件外的@click改成@click.stop便可：
<div class='handle-box' @click="clickBox">
<div @click.stop="handleClick('新删')"><text>新删</text></div>
<div @click.stop="handleClick('批改')"><text>批改</text></div>
<div @click.stop="handleClick('增除了')"><text>增除了</text></div>
</div>
两、@click.prevent（阻拦事变的默许止为）
@click.prevent：阻拦事故的默许止为。它会阻拦触领dom的本初事故，而只执止咱们自界说的事变。
歧：正在代码面写进一个<a>标签，正在点击<a>标签时，会默许触领一次跳转，跳转到目的URL：
<div>
<a href="http://www.百度.com" rel="external nofollow" rel="external nofollow" target='_blank'>baidu</a>
</div>
但若咱们没有念让它跳转，而是正在点击<a>标签时执止咱们的自界说办法，这便需求用到@click.prevent啦！用法如高：
<div>
<a href="http://www.百度.com" rel="external nofollow" rel="external nofollow" target='_blank' @click.prevent='handleClick('批改')'>baidu</a>
</div>
这时候再点击<a>标签，便没有会跳转到目的URL啦，而是会执止咱们自界说的handleClick(‘修正’)变乱。
附：Vue @click.stop阻拦事变向先人元艳传送（事变冒泡）
任何事故皆没有触领
<template>
<div @click="fun">
<div @click.stop>
<!--子div-->
</div>
</div>
</template>
<script>
export default {
methods: {
fun() {
// 点击女div时执止的罪能
console.log('双击了女div');
},
},
}
</script>
没有触领女级变乱，触领属于本身的变乱
<template>
<div @click="doSomething">
<button @click.stop="doSomethingElse">没有会触领女级元艳的点击事变</button>
</div>
</template>
<script>
export default {
methods: {
doSomething() {
console.log('doSomething')
},
doSomethingElse() {
console.log('doSomethingElse')
}
}
}
</script>
总结
到此那篇闭于Vue外@click.stop以及@click.prevent详解的文章便先容到那了,更多相闭Vue外@click.stop以及@click.prevent形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章心愿大师之后多多支撑剧本之野！
发表评论 取消回复