Vue 事件修饰符

在 Vue 中，事件修饰符允许我们在处理 DOM 事件时添加一些特殊的修饰符，以便更方便地控制事件的行为。以下是常用的 Vue 事件修饰符：

.stop

.stop 修饰符用于阻止事件冒泡，即停止事件在父元素之间的传播。

示例：

<template>
  <div @click="parentClick">
    <div @click.stop="childClick">
      Child Element
    </div>
  </div>
</template>

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

.prevent

.prevent 修饰符用于阻止默认的事件行为，例如阻止表单提交的默认刷新页面行为。

示例：

<template>
  <form @submit.prevent="submitForm">
    <!-- 表单内容 -->
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 处理表单提交逻辑
    }
  }
};
</script>

.capture

.capture 修饰符用于将事件监听器添加到父元素上，而不是默认的冒泡阶段。

示例：

<template>
  <div @click.capture="parentClick">
    <div @click="childClick">
      Child Element
    </div>
  </div>
</template>

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

.self

.self 修饰符用于限制事件只能由元素自身触发，而不包括子元素。

示例：

<template>
  <div @click.self="parentClick">
    <div @click="childClick">
      Child Element
    </div>
  </div>
</template>

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