Vue：@click.stop -- 阻止事件向祖先元素传递（事件冒泡）
在Vue中，.stop修饰符用于事件绑定，它会阻止事件冒泡。这通常在你希望阻止事件继续传递给父元素时非常有用。
例如，如果你有一个按钮嵌套在另一个按钮中，并且你希望点击内部按钮时不触发外部按钮的点击事件，你可以使用.stop修饰符。
下面是一个简单的例子：
<template>
<div id="app">
<div @click="parentClicked">
<!-- 使用 .stop 修饰符来阻止点击事件冒泡 -->
<button @click.stop="childClicked">Click Me</button>
</div>
</div>
</template>
<script>
export default {
methods: {
parentClicked() {
console.log('Parent clicked');
},
childClicked() {
console.log('Child clicked');
}
}
}
</script>在这个例子中，当你点击"Click Me"按钮时，只有childClicked方法会被调用，而parentClicked不会被调用，因为.stop修饰符阻止了事件冒泡。
评论已关闭