el-button组件@DBLCLICK双击事件无效原因及解决办法
1.给vue组件绑定事件时候,组件加上.native才能监听原生事件,否则会认为监听的是来自Item组件自定义的事件,@dblclick双击事件会无效的原因应该是:elementUI的el-button组件失去了对双击事件的监听。根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上nati
失效例子
<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:鼠标移动
更多推荐
所有评论(0)