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

失效例子

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