VUE的必修课（一）：VUE的修饰符汇总

★ 修饰符 汇总：

.self ：只有绑定事件本身被执行某个操作时，事件才会被触发；

.once ： 事件只可被执行一次；

.prevent ： 阻止默认事件的发生；

.passive : 不去阻止默认事件发生；

.stop ：阻止事件冒泡；

.capture ： 事件捕获；

.native ：保证自定义组件上的事件可以被执行；

.sync ：子组件更新父组件的传递值；

.keyCode : 指定键位触发事件；

.left / .middle / .right : 指定鼠标键位触发事件；

 

★ 以下是解析与示例：

● 修饰符 —— .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。

 

● 修饰符 —— .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按钮，事件打印只执行一次，此后多次点击 事件不生效。

 

● 修饰符 —— .prevent

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

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

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

此示例出处见底部标注 参考文章；

 

 

● 修饰符 —— .passive

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

解释：【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。】   原文引用自 ： Vue事件修饰符（二）.prevent .passive     作者：苏茶茉芳_亚泽伊

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

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

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

 此示例出处见底部标注 参考文章；

 

● 修饰符 —— .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修饰符后可避免此情况发生。

 

● 修饰符 —— .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。

 

● 修饰符 —— .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后可以直接生效该事件。

 

● 修饰符 —— .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的状态。

 

 

 

 解决的办法之一就是使用.sync修饰符，在子组件关闭（show = false）后，将变化后的值false传递给父组件的show值同时变为false。

 

● 修饰符 —— .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

普通按键例如 字母键 需 写成 键码形式。

<input type="text" @keyup.ctrl.67="children">

键码参考 ：键码表

 

● 修饰符 ——　 .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)
        }
    }

此示例出处见底部标注 参考文章；

 

补充1 ：修饰符是可以混合使用的，比如@click.stop.prevent ；

补充2 ：还有个别修饰符此不做汇总，在移动端并不适用，需了解更多详细的内容或分析 请自行查阅下方 参考文章 ↓↓↓

 

参考文章：「百毒不侵」面试官最喜欢问的13种Vue修饰符     原文作者：@Sunshine_Lin（林三心）