失效例子

<el-button type="primary" size="small" @dblclick="doubleC">
          查询
</el-button>

上面的@dblclick双击事件会无效。

需要在事件后面加上.native才能生效

<el-button type="primary" size="small" @dblclick.native="doubleC">
          查询
</el-button>

@dblclick双击事件会无效的原因应该是:elementUI的el-button组件失去了对双击事件的监听。

为什么加上.native就可以生效了?

给组件绑定事件时,组件加上.native才能监听原生事件,否则会认为监听的是来自组件自定义的事件。

关于.native.prevent以及父子组件通讯的原则::

订阅专栏
@click.native.prevent

1.给vue组件绑定事件时候,组件加上.native才能监听原生事件,否则会认为监听的是来自Item组件自定义的事件,

在封装好的组件上使用,所以要加上.native才能click

2.prevent 是用来阻止默认的 ,相当于原生的event.preventDefault()

根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。
但父组件想在子组件上监听自己的click的话,需要加上native修饰符

js原生事件类型:
click:单击
dblclick:双击
mousedown:鼠标按下
mouseup:鼠标抬起
mouseover:鼠标悬浮
mouseout:鼠标离开
mousemove:鼠标移动
 

Logo

前往低代码交流专区

更多推荐