@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为

联合饿了吗UI使用的时候，el-table(主表)包含一个或多个子表时(el-tabs)，点击右侧的编辑、删除时会同时触发el-table的current-change()，如果子表过多会，每次点击编辑/删除都会多次同时调用子表的数据查询接口，此时在编辑和删除的click事件加上

@click.stop.prevent会避免多次调用子表的查询接口(如下)

注：本人是在点击删除时根据tabs的一个或多个字表提示删除信息的不同用到了上述写法，做个记录

vue @click的stop和prevent的更多相关文章

  1. vue - @click 用到的修饰符

    1.vue提供的方法 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --><a v-on:click.st ...

  2. vue click事件 v-on:click

    v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. vue click事件获取当前元素属性

    Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...

  4. vue click.stop阻止点击事件继续传播

    <div id="app"> <div @click="dodo"> <button @:click="doThis&q ...

  5. vue click.stop

    <div id="app"> <div v-on:click="dodo"> <button v-on:click="d ...

  6. vue @click.native

    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件 ...

  7. vue @click 使用三目运算（实现动态更换绑定的函数）

    转载:https://www.jianshu.com/p/ea4471c9f333 @click 错误写法 @click="dialogStatus=='create'?createData ...

  8. vue @click传字符串

    参考: https://www.cnblogs.com/springlight/p/5782637.html 关键:使用转译字符 \ 来转译引号 方法一. 直接传递: var tem = " ...

  9. vue - @click 传参删除

    <template>   <div id="app">      <div v-for="todo in  todos" :key ...

  10. vue.js 2.0开发(4)

    使用vue-cli,首先安装: npm install -g vue-cli 安装完了执行vue命令,会出现 vue init <template-name> <project-na ...

随机推荐

  1. 【Java并发006】使用层面：Lock锁机制全解析

    一.前言 二.synchronized局限性 + Lock锁机制的引入 2.1 synchronized局限性 第一,使用synchronized,其他线程只能等待直到持有锁的线程执行完释放锁(syn ...

  2. netty系列之:在netty中使用proxy protocol

    目录 简介 netty对proxy protocol协议的支持 HAProxyMessage的编码解码器 netty中proxy protocol的代码示例 总结 简介 我们知道proxy proto ...

  3. 森林野火故事2.0：一眼看穿！使用 Panel 和 hvPlot 可视化 ⛵

    作者:韩信子@ShowMeAI 数据分析实战系列:https://www.showmeai.tech/tutorials/40 本文地址:https://www.showmeai.tech/artic ...

  4. js-day02-综合案例ATM存款书写

     <script>                 // 1. 不断的弹出对话框         // 3. 金额的变量         let money = 100         w ...

  5. 疫情可视化part3

    前言 之前在part2中说的添加自定义主题配色已经开发完成了,除此之外我还添加了一些的3d特效. 前期文章 这是part1的文章:https://blog.csdn.net/xi1213/articl ...

  6. kestrel网络编程--开发Fiddler

    1 文章目的 本文讲解基于kestrel开发类似Fiddler应用的过程,让读者了解kestrel网络编程里面的kestrel中间件和http应用中间件.由于最终目的不是输出完整功能的产品,所以这里只 ...

  7. typora软件下载跟安装

    typora软件介绍 typora是一款文本编辑器 是目前非常火爆的文本编辑器 [下载地址](Typora 官方中文站 (typoraio.cn)) 安装操作 pj链接 注意:不要更新!!! 安装 路 ...

  8. Mqttnet内存与性能改进录

    1 MQTTnet介绍 MQTTnet是一个高性能的 .NET MQTT库,它提供MQTT客户端和MQTT服务器的功能,支持到最新MQTT5协议版本,支持.Net Framework4.5.2版本或以 ...

  9. 使用Git提交代码

    目录 1.提交前准备工作 2.代码提交步骤 3.从git上面拉代码 4.Git变更集 5.参考资料 1.提交前准备工作 首先去git官网下载git工具(Git GUI Here.Git Bash He ...

  10. 一个实现单线程/多线程下代码调用链中传递数据的处理类: CallContext(LogicalSetData,LogicalGetData),含.net core的实现

    详情请参考原文:一个实现单线程/多线程下代码调用链中传递数据的处理类: CallContext