vue事件修饰符

最新推荐文章于 2025-02-07 09:00:00 发布

原创最新推荐文章于 2025-02-07 09:00:00 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 2 个专栏收录

2 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

本文深入探讨了Vue中事件修饰符的使用方法及其作用，包括.stop阻止事件冒泡，.capture实现事件捕获，.once确保事件仅执行一次，.self限定事件仅在元素本身触发，以及.prevent用于阻止默认行为。通过具体示例代码展示了如何在实际项目中应用这些修饰符。

.stop

阻止事件冒泡
父子元素都有事件绑定的时候, child.stop会阻止事件向上传递

.capture

事件捕获

.once

只执行一次

.self

只有触发自身事件时才执行(不受冒泡和捕获影响)

.prevent

阻止默认行为

<a href='http://www.uplyw.com' @click.prevent="jump"></a>
<!--此时a链接会执行 jump 事件  但不会跳转到对应地址-->

<div id="app">
    <div @click="parend">parent
        <div @click="child">child
            <div @click.stop="grandson">grandson</div>
        </div>
    </div>
</div>
<script src="./vue/2.5.14/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            
        },
        methods: {
            parend(){
                console.log('parend');
            },
            child(){
                console.log('child');
            },
            grandson(){
                console.log('grandson');
            },
        }