vue事件修饰符

@click

@click直接点击，会触发父元素事件

例如：

<template>
    <div @click="parentClick">
        <div @click="childClick" >
            子界面
        </div>
    </div>
</template>

<script>

　　export default {
　　　　data() {
　　　　　　return {}
　　　　},
　　　　methods: {

　　　　　　parentClick(){
　　　　　　　　console.log('点击了父界面')
　　　　　　},
　　　　　　childClick(){
　　　　　　　　console.log('点击了子界面')
　　　　　　}
　　　　}

</script>

当单击子界面时，打印结果为：

点击了子界面

点击了父界面

 

@click.stop

@click.stop阻止冒泡事件，相当于event.stopPropagation()

例如：

<template>
    <div @click="parentClick">
        <div @click.stop="childClick" >
            子界面
        </div>
    </div>
</template>

<script>
　　export default {
　　　　data() {
　　　　　　return {}
　　　　},
　　　　methods: {
　　　　　　parentClick(){
　　　　　　　　console.log('点击了父界面')
　　　　　　},
　　　　　　childClick(){
　　　　　　　　console.log('点击了子界面')
　　　　　　}
　　　　}

</script>

当单击子界面时，打印结果为：

点击了子界面

 

@click.prevent

@click.prevent阻止默认事件，相当于event.preventDefault()

例如：

<template>
    <div @click="parentClick">
        <div @click.stop="childClick" >
            子界面
        </div>
        <a href="www.baidu.com" @click.prevent="urlClick">        
             跳转链接
        </a>
    </div>
</template>

<script>
　　export default {
　　　　data() {
　　　　　　return {}
　　　　},
　　　　methods: {
　　　　　　parentClick(){
　　　　　　　　console.log('点击了父界面')
　　　　　　},
　　　　　　childClick(){
　　　　　　　　console.log('点击了子界面')
　　　　　　},
          urlClick(){
            console.log('点击了跳转链接')
          }
　　　　}

</script>                

当点击a标签时，界面不会跳转到设置的跳转链接www.baidu.com，而是执行绑定的事件函数urlClick()

运行结果为：

点击了跳转链接
点击了父界面

@click.prevent可以搭配stop事件使用

例如：若事件为  @click.prevent.stop="urlClick"

则运行结果为：

点击了跳转链接

 

@click.self

 @click.self 事件，只有点击绑定了self修饰符的元素本身才会触发事件

例如：

<template>
    <div @click.self="parentClick">
        <div @click="childClick" >
            子界面
        </div>
    </div>
</template>

<script>
　　export default {
　　　　data() {
　　　　　　return {}
　　　　},
　　　　methods: {

　　　　　　parentClick(){
　　　　　　　　console.log('点击了父界面')
　　　　　　},
　　　　　　childClick(){
　　　　　　　　console.log('点击了子界面')
　　　　　　}
　　　　}

</script>

当点击子界面时，由于父元素添加了self修饰，所以不会触发

运行结果为

点击了子界面

 

@click.capture

@click.capture为绑定事件添加捕获事件，点击子元素时才会触发，添加了capture修饰符的事件会先执行

例如：

<template>
    <div @click.capture="parentClick">
        <div @click="childClick" >
            子界面
        </div>
    </div>
</template>

<script>
　　export default {
　　　　data() {
　　　　　　return {}
　　　　},
　　　　methods: {

　　　　　　parentClick(){
　　　　　　　　console.log('点击了父界面')
　　　　　　},
　　　　　　childClick(){
　　　　　　　　console.log('点击了子界面')
　　　　　　}
　　　　}

</script>

运行结果为：

点击了父界面
点击了子界面

 

@click.once

@click.once只执行一次事件，之后再触发事件没有效果

 

@click.passive

@click.passive不拦截默认事件