vue 阻止冒泡

作者：故事只剩听说发布日期:2026-06-26 浏览:73

<template>
  <div>
    <!-- 点击父元素会触发其事件处理函数 -->
    <div @click="handleParentClick">
      Parent Div
      <!-- 点击子元素时，阻止事件冒泡到父元素 -->
      <button @click.stop="handleChildClick">Child Button</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('Parent clicked');
    },
    handleChildClick() {
      console.log('Child clicked');
    }
  }
};
</script>

解释说明：

在 Vue 中，事件默认是会冒泡的，即当一个子元素的事件被触发时，该事件会向上传播到父元素。
使用 .stop 修饰符可以阻止事件冒泡。在上面的例子中，点击 Child Button 时，handleChildClick 方法会被调用，但事件不会冒泡到父元素，因此 handleParentClick 不会被触发。
如果没有使用 .stop 修饰符，点击 Child Button 时，handleParentClick 也会被触发。

上一篇：vue sortable

下一篇：vue carousel