一、语法

xxx代表修饰符

@click.xxx = 'fn'

二、修饰符汇总

• stop ：阻止事件冒泡；
• once ： 事件只可被执行一次；
• native ：保证自定义组件上的事件可以被执行；
• prevent ： 阻止默认事件的发生；
• keyCode : 指定键位触发事件；
• self ：只有绑定事件本身被执行某个操作时，事件才会被触发；
• passive : 不去阻止默认事件发生；
• capture ： 事件捕获；
• sync ：子组件更新父组件的传递值；
• left /middle /right : 指定鼠标键位触发事件；

三、用法

3.1、修饰符 —— .stop

阻止事件冒泡

　　<view>
            <view @click='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click.stop='childrenClick'>点击</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

在不添加.stop修饰符的情况下点击button按钮时先后触发事件打印出2 1，即事件冒泡给了父级，父级事件被一同触发。添加.stop修饰符后可避免此情况发生。

3.2、 修饰符 —— .once

顾名思义，事件只可被执行一次。

<view>
            <view @click.self='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click.once='childrenClick'>点击</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

点击加了.once修饰符的button按钮，事件打印只执行一次，此后`多次点击 事件不生效。

3.3、 修饰符 —— .native

保证自定义组件上的事件可以被执行

<view class="padding-tb-lgx bg-gradual-blue">
　　<ybh-tags @click.native='childrenClick' :config='configTags'></ybh-tags>
</view>

methods: {
　　childrenClick(){
　　　　console.log(2);
　　}
},

一般在组件定义事件是无法被直接执行的，大多是通过组件内部的emit广播出处理后的数据，父级通过组件中emit广播的参数名写成方法形式接收，但是通过给事件添加.native后可以直接生效该事件。

3.4、修饰符 —— .prevent

阻止默认事件的发生，比如a标签的跳转、button的提交等。

<a href="#" @click.prevent="clickEvent(1)">点我</a>

methods: {
        clickEvent(num) {
            不加 prevent 点击a标签 先跳转然后输出 1
            加了 prevent 点击a标签 不会跳转只会输出 1
            console.log(num)
        }
    }

3.5、修饰符 —— .keyCode

指定键盘键位触发对应事件，一般配合事件@keyup使用，如指定按ctrl事件触发事件 @keyup.ctrl ;

<input type="number" @keyup.ctrl="children">

也可以有多种搭配，需自行尝试。

Vue提供的keyCode：

//普通键
.enter 
.tab
.delete //(捕获“删除”和“退格”键)
.space
.esc
.up
.down
.left
.right
//系统修饰键
.ctrl
.alt
.meta
.shift

如果如果想直接调用 @keyup.f2 = "add" ,需要自定义全局按键

解决方案如下：键盘对应的键码链接 (https://blog.csdn.net/weixin_42218847/article/details/81411291)

//自定义全局按键修饰符
Vue.config.keyCodes.F2 = 113

<!-- 自定义按键修饰  按  f2 添加 -->
<input type="text" name="" id="" value="" class="form-control" v-model="name" @keyup.113="add"/> 

3.6、修饰符 —— .self

只有绑定事件本身被执行某个操作时，事件才会被触发。有点绕，看示例：

 <view>
            <view @click.self='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click='childrenClick'>点击</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

如果不在父级标签的点击事件上添加.self修饰符，点击button按钮时，会先后触发事件打印出 2 1，形成了事件冒泡，此时对父级事件添加.self后，由于触发的对象并不是父级标签，所以父级标签上的事件不会被触发，点击button后只会打印出 2。

3.7、修饰符 ——.passive

不在阻止默认事件的发生；提问：本来就默认执行了，还要加这玩意干嘛嘞？？？

每个事件执行时，系统都会看一看这个执行的事件有没有被什么 .prevent(阻止默认) 的家伙阻止掉，没有最好，有那就没办法，老老实实听它的。正常情况事件执行次数少或连续执行时间不会很短时是没什么大问题，但是如果是屏幕滚动事件，需要在短时间内连续触发很多次时，每次执行都会问一下这一次有没有被阻止啊啥的，严重影响了性能，就可能会照成滑动卡顿、不流畅的现象。

怎么办嘞？这时候就在事件上加上.passive，直接跟这个事件脸上贴上“ 我没有阻止的倾向 ”，不用再问我有没有被阻止啦。

<div @scroll.passive="onScroll">...</div>

3.8、修饰符 ——.capture

用于事件捕获，与冒泡相反

　　　　　<view>
            <view @click.capture='fatherClick' class="padding-tb-lgx bg-gradual-blue">
                <button @click='childrenClick'>点击</button>
            </view>
        </view>

        methods: {
            fatherClick(){
                console.log(1);
            },
            childrenClick(){
                console.log(2);
            }
        },

在不加.capture修饰时，点击button会前后触发事件冒泡打印出 2 1，而添加了.capture修饰后 事件打印变为 1 2。

3.9、修饰符 ——.sync

父组件传递给子组件值后，若子组件需要更新父组件传递的这个值时在父组件传递值的属性上使用此修饰符。（vue组件之间传值时单向数据流，一般不支持子组件直接更改父组件值）

//父组件 ：
<ybh-tags :isShow.sync='show'></ybh-tags>
data(){
　　return {
　　　　show : true,
　　}
}
//子组件：
this.$emit('update:isShow',false);

以上代码实现内容为：子组件在父组件传递的show为true时显示，子组件关闭（子组件将父组件传递的show值改为false）后子组件隐藏。但是由于控制子组件显隐的show值是父组件传递过来的，在子组件中直接更改show值无法改变父级中的show值，所以导致了父组件在打开一次子组件后，子组件关闭将无法在此显示子组件内容。因为父级在第一次将show值改为true之后，并没有因为子组件将show值改为false而变成false，导致了父组件的show值一直保持在了true的状态。

3.10、 left /middle /right

指定鼠标键位触发对应事件

　<button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">点我</button>

　　methods: {
        点击中键输出1
        点击左键输出2
        点击右键输出3
        clickEvent(num) {
            console.log(num)
        }
    }