关于vue中@click.native.prevent的说明
关于@click.native.prevent的说明
元素中绑定了这个事件
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
1、在封装好的组件上使用,所以要加上.native才能click。
2、prevent是用来阻止默认的事件。就相当于…event.preventDefault(),父组件想在子组件上监听自己的click的话,需要加上native修饰符。
vue的@click.native.prevent,点击事件加上native.prevent有什么用呢
在项目发版的总结过程中,突然看到@click.native.prevent,很好奇它的用法,一开始还以为是element-ui里面自带了,看了之后也没有啊,上网搜集了资料,打算记录下来。
代码如下
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click.native.prevent="handleAgencyRelationship(row)">代理关系处理</el-dropdown-item> </el-dropdown-menu>
elment-ui
我们项目的业务场景的点击事件,是不需要用到按钮的,所以我们需要用到的是原生的vue点击事件。而加native.prevent的精髓就在此
- 给vue绑定组件的时候,需要加一个native,不加的话会被认为是要监听item里面的自定义事件,(显然我们这里不需要)
- 加prevent,是用来阻止默认事件的,相当于Jquery里面的event.preventDefault()方法阻止元素发生默认的行为。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Nuxt pages下不同的页面对应layout下的页面布局操作
这篇文章主要介绍了Nuxt pages下不同的页面对应layout下的页面布局操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11详解使用Vue Router导航钩子与Vuex来实现后退状态保存
本篇文章主要介绍了详解使用Vue Router导航钩子与Vuex来实现后退状态保存,具有一定的参考价值,有兴趣的可以了解一下2017-09-09解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
这篇文章主要介绍了解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最新评论