vue事件修饰符self

在Vue中，事件修饰符self用于指定只有当事件在该元素本身（而不是其子元素）触发时才会触发回调函数。引用中的例子可以解释这一点。在这个例子中，如果div元素被点击，doThat函数会被调用，但是如果div元素的子元素被点击，doThat函数则不会被调用。所以，事件修饰符self用来限制事件只能在元素本身触发时才执行相应的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue 事件修饰符.self的用法](https://blog.csdn.net/qq_33706382/article/details/96478908)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .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事件修饰符有哪些

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 ]