@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. ifconfig命令的使用

    ifconfig命令 用途:配置或显示TCP/IP网络的网络接口参数. *1.通过--help学习ifconfig的使用 点击查看代码 [root@rocky8 ~]# ifconfig --help ...

  2. SpringBoot+hutool工具-数据库数据导出Excel

    hutool文档地址:https://www.hutool.cn/docs/#/ 导入依赖 <dependency> <groupId>cn.hutool</groupI ...

  3. SpringBoot2.5.1+Mybatis-Plus3.4.3:(Property ‘sqlSessionFactory‘ or ‘sqlSessionTemplate‘ are required)

    项目引发这个问题: Property 'sqlSessionFactory' or 'sqlSessionTemplate' are required <parent> <group ...

  4. CodeGeeX：vscode中全新的智能代码补全插件

    大家好我是费老师,代码智能补全是近几年非常热门的话题,有前不久宣告项目终结的kite,反响平平的tabnine,以及最近吃了一堆官司的copilot. 而广大从事编程工作的用户只关心市面上的代码智能补 ...

  5. Datawhale组队学习_Task04：详读西瓜书+南瓜书第5章

    第5章 神经网络 5.1 神经元模型 基本定义:神经网络是由具有适应性的简单单元组成的广泛并行互联的网络,它的组织能够模拟生物神经系统对真实世界物体所做出的交互反应. M-P神经元模型:   在此模型 ...

  6. 5V升压12.6V

    产品概述 PW4053 是一款 5V 输入,最大 1.2A 充电电流,支持三节锂离子电池的升压充电管理 IC.PW4053 集成功率 MOS,采用异步开关架构,使其在应用时仅需极少的外围器件,可有效减 ...

  7. 用openpyxl创建工作簿和工作表

    import osimport openpyxl #设置默认路径os.chdir(r'D:/openpyxl/') #创建工作簿变量 wb = openpyxl.Workbook() #创建工作表变量 ...

  8. 使用JavaScript制作一个页面的电子时钟

    题目:做一个电子时钟,显示当前的年月日,时分秒,要求自动变化. 案例分析: 1.使用一个div盒子来展示时钟的内容: 2.将盒子在JavaScrip里面获取div盒子: 3.我们需要一个定时器setI ...

  9. 二阶段目标检测网络-FPN 详解

    论文背景 引言(Introduction) 特征金字塔网络 FPN FPN网络建立 Anchor锚框生成规则 实验 代码解读 参考资料 本篇文章是论文阅读笔记和网络理解心得总结而来,部分资料和图参考论 ...

  10. Django之SQL注入漏洞复现(CVE-2021-35042)

    前言 SQL注入的原理是对web请求,表单或域名等提交查询的字符串没有进行安全检测过滤,攻击者可以拼接执行恶意SQL命令,导致用户数据泄露 漏洞原理 Django 组件存在 SQL 注入漏洞,该漏洞是 ...