Vue 阻止事件冒泡
在Vue中，阻止事件冒泡可以通过.stop修饰符来实现。这个修饰符可以应用在v-on指令中，它会调用原生事件的stopPropagation方法，阻止事件进一步冒泡。
例如，假设你有一个嵌套的元素，当点击内部元素时，你不希望触发外部元素的点击事件：
<template>
<div @click="outerClick">
Outer Element
<div @click.stop="innerClick">
Inner Element
</div>
</div>
</template>
<script>
export default {
methods: {
outerClick() {
console.log('Outer element clicked');
},
innerClick() {
console.log('Inner element clicked');
}
}
}
</script>在这个例子中，当点击Inner Element时，会触发innerClick方法，并且由于.stop修饰符的作用，不会继续触发外部的outerClick方法。
评论已关闭