在开发过程中,我们总要遇到冒泡事件,文中提到的是在Vue组件绑定传参数时,如果直接在方法中传入一个参数像这样:
不需要在子点击事件中传值,只是取消外部的点击事件,下面的代码即可完成阻止冒泡功能。
<div @click="clickParent">
父点击
<p @click="clickChildren">子点击</p>
<p >打酱油</p>
</div>
methods:{
clickParent(){
console.log("点击了外部")
}
clickChildren(e){
console.log("点击了内部")
e.stopPropagation();
}
}
如果需要传值,但是又要阻止冒泡事件,就需要在函数的内部调用window.event方法,通过参数获取event事件,在有值传参的过程中是失效的。代码如下
<div @click="clickParent">
父点击
<p @click="clickChildren(params)">子点击</p>
<p >打酱油</p>
</div>
methods:{
clickParent(){
console.log("点击了外部")
}
clickChildren(params){
console.log("点击了内部" + params)
window.event.stopPropagation();
}
}