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 可以减少事件的传播，因为您直接监听的是原生事件。