一起学Vuejs（十四）----- 事件修饰符

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

事件修饰符：

事件监听可以使用 v-on 指令，而事件修饰符来处理 DOM 事件细节。

 

stop 修饰符：

阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递）：

<template>
    <div>
        <div style="width: 500px; height: 500px" @click="outClick">
            <div style="width: 200px; height: 200px" @click="innerClick"></div>
        </div>      
    </div>
</template>

<script>
export default {
    methods: {
        outClick(){
            console.log('this is outer')
        },
        innerClick(){
            console.log('this is inner')
        }
    }
}
</script>

 点击内层 div 的结果：

this is inner
this is outer

 点击外层 div 的结果：

this is outer

 修改代码，为内层点击事件添加事件".stop"修饰符：

<div style="width: 200px; height: 200px" @click.stop="innerClick"></div>

 再次点击内层div的结果如下：

this is inner

 

prevent 修饰符：

阻止默认事件的发生，默认事件指对DOM的操作会引起自动执行的动作（点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等）。

<a href="www.baidu.com" @click.prevent>百度</a>

 

capture 修饰符：

捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。

<template>
    <div>
        <div style="width: 500px; height: 500px" @click.capture="outClick">
            <div style="width: 200px; height: 200px" @click="innerClick">
                <div style="width: 100px; height: 100px" @click="mostInnerClick"></div>
            </div>
        </div>      
    </div>
</template>

<script>
export default {
    methods: {
        outClick(){
            console.log('this is outer')
        },
        innerClick(){
            console.log('this is inner')
        },
        mostInnerClick(){
            console.log('this is most inner')
        }
    }
}
</script>

点击最内层div，结果如下：

this is outer
this is most inner
this is inner

 

self 修饰符：

将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

<template>
    <div>
        <div style="width: 500px; height: 500px" @click="outClick">
            <div style="width: 200px; height: 200px" @click.self="innerClick">
                <div style="width: 100px; height: 100px" @click="mostInnerClick"></div>
            </div>
        </div>      
    </div>
</template>

 点击最内层div，结果如下：

this is most inner
this is outer

 

once 修饰符：

设置事件只能触发一次，比如按钮的点击等。

 

native 修饰符：

在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加 native修饰符的事件是无法触发的。

…
<my-child @click="outClick"></my-child>    
…

<script>
export default {
    methods: {
        outClick(){
            console.log('this is outer')
        }
    },
    components: { MyChild },
}
</script>

 此时无法触发点击事件

…
<my-child @click.native="outClick"></my-child>    
…

<script>
export default {
    methods: {
        outClick(){
            console.log('this is outer')
        }
    },
    components: { MyChild },
}
</script>

 此时可以触发点击事件

 

 

博客借鉴：https://www.cnblogs.com/xiaoyaoxingchen/p/10405207.html