Vue事件修饰符

444 阅读2分钟

常用的事件修饰符

.1、stop:阻止冒泡(即阻止事件向上级DOM元素传递)

2、.prevent:阻止默认行为 (阻止默认事件的发生)

3、.self:仅绑定元素自身触发 (将事件绑定到自身,只有自身才能触发,通常用于避免冒泡事件的影响)

4、.once: 2.1.4 新增,只触发一次(比如按钮的点击等)

5、. native:在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。

可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签,并且该修饰符对普通HTML标签是没有任何作用的。

![](https://upload-images.jianshu.io/upload_images/24120288-ffc2b00cb3111bcf.png?imageMogr2/auto-orient/strip|imageView2/2/w/588/format/webp)
![](https://upload-images.jianshu.io/upload_images/24120288-d46dfc27b12fe63c.png?imageMogr2/auto-orient/strip|imageView2/2/w/578/format/webp)

点击效果

![](https://upload-images.jianshu.io/upload_images/24120288-463e5a7f328abb3e.png?imageMogr2/auto-orient/strip|imageView2/2/w/554/format/webp)

6、passive: 2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用(passive是不拦截默认事件)

passive这个修饰符会执行默认方法。你们可能会问,明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。

【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时,才能知道内部是否会调用preventDefault函数来阻止事件的默认行为,所以浏览器本身是没有办法对这种场景进行优化的。这种场景下,用户的手势事件无法快速产生,会导致页面无法快速执行滑动逻辑,从而让用户感觉到页面卡顿。】

通俗点说就是每次事件产生,浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器,不用查询了,我们没用preventDefault阻止默认动作。

这里一般用在滚动监听,@scoll,@touchmove 。因为滚动监听过程中,移动每个像素都会产生一次事件,每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过,可以大大提升滑动的流畅度。

注:passive和prevent冲突,不能同时绑定在一个监听器上。

7、.sync 修饰符

.sync是vue中用于实现简单的“双向绑定”的语法糖,在平时的开发中是非常使用的。

vue的prop是单向下行绑定:父级的prop的更新会向下流动到子组件中,但是反过来不行。可是有些情况,我们需要对prop进行“双向绑定”。这个时候,就可以用.sync来解决

.sync用法

当子组件需要更新 title 的值时,它需要显式地触发一个更新事件:this.$emit('update:title', newValue)

当子组件需要更新 title 的值时,它需要显式地触发一个更新事件:this.$emit('update:title', newValue)这样title的属性在子组件内部更新,父组件也能感知的到,实现了“双向绑定”。

.sync应运实例

![](https://upload-images.jianshu.io/upload_images/24120288-91da5bbd80ffee08.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)