vue.js中的一些事件修饰符【前端】

不要一直责怪过去的自己，他独自站在雾里也很迷茫。

.stop：

作用：调用 event.stopPropagation()，阻止事件冒泡。

示例：

<template>
  <div @click="parentClick">
    <button @click.stop="childClick">Click me</button>
  </div>
</template>

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

在这个例子中，点击按钮只会触发 childClick 方法，而不会触发 parentClick 方法。

.prevent：

作用：调用 event.preventDefault()，阻止默认事件的发生。

示例：

<template>
  <form @submit.prevent="handleSubmit">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      alert('Form submitted!');
    }
  }
};
</script>

在这个例子中，表单的提交事件被阻止，handleSubmit 方法会被调用，而不会实际提交表单。也就是表单的提交事件被阻止，这意味着当用户点击“Submit”按钮时，浏览器不会执行默认的表单提交行为。【因为默认情况下，表单提交会导致页面重新加载。】

.self：

作用：只有当事件目标是事件绑定的元素本身时，才触发事件处理程序。

示例：

<template>
  <div @click.self="handleClick">
    Click me (only this div)
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Div clicked!');
    }
  }
};
</script>

在这个例子中，只有点击 div 本身时，才会触发 handleClick 方法，点击 div 内部的其他元素不会触发。

.once：

作用：只触发一次事件处理程序，之后自动移除。

示例：

<template>
  <button @click.once="handleClick">Click me (once)</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Button clicked once!');
    }
  }
};
</script>

在这个例子中，点击一次按钮后会弹出提示框，但之后再点击按钮不会有任何反应。

.capture：

作用：使用事件捕获模式而不是冒泡模式。

示例：

<template>
  <div @click.capture="handleClick">
    Click me (capture)
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Div clicked during capture phase!');
    }
  }
};
</script>

在这个例子中，事件处理程序会在事件捕获阶段被调用。

.native：

作用：用于在自定义组件上监听原生事件。

示例：

<template>
  <custom-component @click.native="handleClick"></custom-component>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Native click event!');
    }
  }
};
</script>

在这个例子中，handleClick 方法会在 custom-component 的原生点击事件上被触发。

示例2:
有一个自定义的按钮组件 my-button，它内部有一个 元素。我们希望在点击这个按钮时触发一个事件：

<template>
  <button @click="handleInnerClick">Inner Button</button>
</template>

<script>
export default {
  methods: {
    handleInnerClick() {
      // 处理内部按钮的点击事件
      console.log('Button clicked!');
    }
  }
}
</script>

如果在父组件中使用这个 my-button：

<my-button @click="handleClick">Click Me</my-button>

这里的 @click 监听的是 my-button 组件的自定义事件，而不是内部 <button> 的点击事件。

所以如果我们想监听内部 <button> 的点击事件，可以这样写：

<my-button @click.native="handleClick">Click Me</my-button>

何时使用 .native？

• 使用自定义组件时：当您需要直接监听组件内部的原生事件，而不是组件发出的自定义事件时，使用 .native 修饰符。
• 性能考虑：在某些情况下，使用 .native 可以减少事件的传播，因为您直接监听的是原生事件。