关于vue中@click.native.prevent的说明

 更新时间:2022年03月08日 10:07:48   作者:不丸子  
这篇文章主要介绍了关于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()方法阻止元素发生默认的行为。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue安装和使用scss及sass与scss的区别详解

    vue安装和使用scss及sass与scss的区别详解

    这篇文章主要介绍了vue安装和使用教程,用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,感兴趣的朋友一起看看吧
    2018-10-10
  • 详解vue更改头像功能实现

    详解vue更改头像功能实现

    这篇文章主要介绍了vue更改头像功能实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解vue移动端项目代码拆分记录

    详解vue移动端项目代码拆分记录

    这篇文章主要介绍了详解vue移动端项目代码拆分记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • element-plus结合sortablejs实现table行拖拽效果

    element-plus结合sortablejs实现table行拖拽效果

    使用element-plus的el-table组件创建出来的table,结合sortable.js实现table行拖动排序,文中有详细的代码示例供大家参考,具有一定的参考价值,感兴趣的同学可以自己动手试一试
    2023-10-10
  • element可编辑表格验证问题解决

    element可编辑表格验证问题解决

    本文主要介绍了element可编辑表格验证问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue中过滤器的用法

    vue中过滤器的用法

    这篇文章介绍了vue中过滤器的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • Vue.extend构造器的详解

    Vue.extend构造器的详解

    这篇文章主要介绍了Vue.extend构造器的详解的相关资料,需要的朋友可以参考下
    2017-07-07
  • vue Tab切换以及缓存页面处理的几种方式

    vue Tab切换以及缓存页面处理的几种方式

    相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。
    2021-05-05
  • Vue使用konva实现一个简便的流程图

    Vue使用konva实现一个简便的流程图

    日常开发中我们可能碰到流程图的需求,实现流程图的库有很多,如果我们想要实现一个简便的流程图可以使用konva库来实现,下面我们就来看一下具体的实现过程,需要的朋友可以参考下
    2023-08-08
  • SpringBoot结合Vue3实现简单的前后端交互

    SpringBoot结合Vue3实现简单的前后端交互

    本文主要介绍了SpringBoot结合Vue3实现简单的前后端交互,结合实际案例,说明了如何实现前后端数据的交互,具有一定的 参考价值,感兴趣的可以了解一下
    2023-08-08

最新评论