vue .stop

// 使用 .stop 修饰符的示例代码

<template>
  <div>
    <!-- 点击子元素不会触发父元素的点击事件 -->
    <button @click="childClick" @click.stop="handleChildClick">Child Button</button>
    <p @click="parentClick">Parent Paragraph</p>
  </div>
</template>

<script>
export default {
  methods: {
    handleChildClick() {
      console.log('Child button clicked, but parent click is stopped.');
    },
    childClick() {
      console.log('This will not be triggered due to .stop modifier.');
    },
    parentClick() {
      console.log('Parent paragraph clicked.');
    }
  }
};
</script>

解释说明：

• .stop 是 Vue.js 中的一个事件修饰符，用于阻止事件冒泡。
• 在上面的示例中，@click.stop="handleChildClick" 表示当点击 Child Button 时，只会触发 handleChildClick 方法，而不会触发父元素的点击事件（即 parentClick 方法不会被调用）。
• 如果没有 .stop 修饰符，点击 Child Button 会同时触发 handleChildClick 和 parentClick。