vue阻止冒泡

作者：世界哪有真情发布日期:2026-01-03 浏览:48

<template>
  <div @click="handleDivClick">
    <button @click.stop="handleButtonClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleDivClick() {
      console.log('Div 被点击了');
    },
    handleButtonClick() {
      console.log('Button 被点击了');
    }
  }
};
</script>

解释说明：

在 Vue 中，事件冒泡是指当一个子元素的事件被触发时，该事件会向上传播到父级元素。如果希望阻止这种行为，可以使用 .stop 修饰符。
在上面的代码中，@click.stop="handleButtonClick" 表示当按钮被点击时，点击事件不会继续向上传播到父级 div 元素，因此 handleDivClick 不会被触发。
如果移除 .stop 修饰符，点击按钮时，handleButtonClick 和 handleDivClick 都会被触发，因为事件会冒泡到父级 div。

上一篇：vue checkbox

下一篇：vue3引入组件