el-button组件@DBLCLICK双击事件无效原因及解决办法

失效例子


          查询

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

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


          查询

@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:鼠标移动
 

你可能感兴趣的:(vue.js,前端,javascript)