@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集合框架002】原理层面：HashMap全解析

    一.前言 二.HashMap 2.1 HashMap数据结构 + HashMap线程不安全 + 哈希冲突 2.1.1 HashMap数据结构 学习的时候,先整体后细节,HashMap整体结构是 底层数 ...

  2. 硬核！Apache Hudi Schema演变深度分析与应用

    1.场景需求 在医疗场景下,涉及到的业务库有几十个,可能有上万张表要做实时入湖,其中还有某些库的表结构修改操作是通过业务人员在网页手工实现,自由度较高,导致整体上存在非常多的新增列,删除列,改列名的情 ...

  3. Clickhouse表引擎之MergeTree

    1.概述 在Clickhouse中有多种表引擎,不同的表引擎拥有不同的功能,它直接决定了数据如何读写.是否能够并发读写.是否支持索引.数据是否可备份等等.本篇博客笔者将为大家介绍Clickhouse中 ...

  4. 【PostgreSQL】PG读取元数据获取表结构及字段类型信息（过程拆解及其他应用场景）

    〇.参考链接 一.代码 指定模式的表名和字段 select c.relname 表名, cast ( obj_description (relfilenode, 'pg_class') as varc ...

  5. 【每日一题】【map存值】2022年2月25日-NC112 进制转换

    描述给定一个十进制数 M ,以及需要转换的进制数 N .将十进制数 M 转化为 N 进制数. 当 N 大于 10 以后, 应在结果中使用大写字母表示大于 10 的一位,如 'A' 表示此位为 10 , ...

  6. 5V升压8.4V，5V转8.4芯片电路图

    PW5300是电流模式升压DC-DC转换器.其内置0.2Ω功率MOSFET的PWM电路使该稳压器具有效高的功率效率.内部补偿网络还可以程度地减少了6个外部元件的数量.误差放大器的同相输入接到0.6V精 ...

  7. Pycharm介绍下载指南

    Pycharm的基本介绍 PyCharm是一种Python IDE是可以帮助用户在使用Python语言开发时提高其效率的开发工具. Pycharm的官网:https://www.jetbrains.c ...

  8. GitHub - 电脑经常无法访问GitHub页面

    来自这里 1.打开Dns检测|Dns查询 - 站长工具2.在检测输入栏中输入http://github.com官网3.把检测列表里的TTL值最小的IP输入到host里,并对应写上github官网域名. ...

  9. [OpenCV实战]10 使用Hu矩进行形状匹配

    目录 1 什么是图像矩? 2 如何计算图像矩 2.1 质心获取 2.2 中心矩 2.3 Hu矩 3 基于Hu矩实现形状匹配 3.1 Hu矩的计算 3.2 基于matchShapes函数计算两个图形之间 ...

  10. Hadoop详解(08) - Hadoop企业优化方案.docx

    Hadoop详解(08) - Hadoop企业优化方案.docx MapReduce优化 MapReduce 跑的慢的原因 计算机性能:CPU.内存.磁盘健康.网络 I/O 操作优化 (1)数据倾斜 ...