vue事件修饰符有哪些

Vue事件修饰符一共有6个，分别是prevent、stop、once、capture、self和passive。其中，prevent用于阻止默认事件，stop用于阻止事件冒泡，once用于事件只触发一次。capture用于使用事件的捕捉模式，self只有event.target是当前操作的元素时才触发事件，passive用于事件的默认行为立即执行，无需等待事件回调执行完毕。\[1\]这些修饰符可以单独使用，也可以多个修饰符一起使用，并且可以随意顺序组合使用。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [Vue常见的事件修饰符](https://blog.csdn.net/weixin_46713508/article/details/129404994)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

相关问题

vue 事件修饰符&按键修饰符

Vue事件修饰符是用来改变事件的行为的特殊标记。它们以点号(".")开头，紧跟着是修饰符的名称。Vue提供了以下事件修饰符：

1. .stop：阻止事件冒泡；
2. .prevent：阻止默认行为；
3. .capture：使用事件捕获模式；
4. .self：只当事件在该元素本身（而不是子元素）触发时触发回调；
5. .once：只触发一次；
6. .passive：告诉浏览器该事件处理程序不会调用preventDefault()。

例如：

<button @click.stop="doSomething"></button>

在这个例子中，当点击按钮时，事件不会冒泡到父元素。

<a href="#" @click.prevent="doSomething"></a>

在这个例子中，当点击链接时，页面不会跳转到指定链接，因为事件被阻止了默认行为。

<div @click.capture="doSomething"></div>

在这个例子中，使用事件捕获模式，事件从最外层元素开始向内传递。

<div @click.self="doSomething"></div>

在这个例子中，只有当点击div元素本身时，事件才会触发回调函数。

<button @click.once="doSomething"></button>

在这个例子中，事件只会触发一次。

<div @touchstart.passive="doSomething"></div>

在这个例子中，告诉浏览器该事件处理程序不会调用preventDefault()，可以提高页面的滚动性能。

vue事件修饰符native

`v-on` 指令可以监听 DOM 事件并在触发时运行一些 JavaScript 代码。而 `native` 修饰符则可以让 `v-on` 监听组件根元素的原生 DOM 事件，而不是组件内部的子元素事件。

举个例子，假设有一个自定义组件 `MyComponent`，它包含一个子组件 `MyChildComponent`，并在 `MyChildComponent` 中有一个按钮，我们想要在 `MyComponent` 中监听按钮的点击事件。这时候我们可以使用 `native` 修饰符：

<template>
  <div>
    <my-child-component @click.native="handleClick"></my-child-component>
  </div>
</template>

在上面的代码中，`@click.native` 监听的是 `MyChildComponent` 内部按钮的点击事件，但 `handleClick` 方法是在 `MyComponent` 中定义的，因为使用了 `native` 修饰符，所以 `MyComponent` 可以监听到该事件。

需要注意的是，只有在组件根元素上绑定的原生事件才能使用 `native` 修饰符。如果在组件内部的元素上使用 `native` 修饰符是不起作用的。