改变组件默认上报事件的参数,添加额外参数

改变组件默认上报事件的参数,添加额外参数

vue 开发中时常会进行组件封装,稍微复杂点的组件通常会上报事件给父级组件

然而组件默认返回的参数可能不能满足业务场景需求,而组件作为通用组件,也不适合做额外封装

  • 往往这种时候,只是想在组件上报事件参数基础上添加额外参数,触发父组件的方法

假设我封装了一个卡片选择组件(主要是针对样式进行封装),点击卡片后,会通过事件上报当前点击的卡片 item 对象

然而这些卡片是循环渲染出来的,父组件在收到上报的事件后,还额外需要知道当前点击的是循环里的第几个卡片


直接写个匿名函数,将原有参数接收后传递给页面函数

@change="(value) => factorChange(value, item)"

<el-select v-model="item.value" :placeholder="`请选择${item.factorsName}`"  @change="(value) => factorChange(value, item)"><el-option v-for="factorItem in item.detailList" :key="factorItem.id" :label="factorItem.remark" :value="factorItem.value"><div class="user-tag">{{ factorItem.remark }}</div></el-option>
</el-select>


或者组件里面只需要一个标题,调用时也只给了一个标题,上报事件上报的也是标题,而父组件想要得到的是该项的整个数据对象


$event 也可以拿来代表原有参数

  • @submit="handleSubmit(item, $event)"
<part-title @title-click="handleModuleClick(item, $event)" />

如果想直接响应组件的事件,不关注组件内部的事情,可以直接加上 .native 事件修饰符

  • (组件没有响应点击事件时,父页面直接给组件写 @click,并不会触发点击事件)
<part-title @click.native="handleModuleClick(item)" />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/457248.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux中级(DNS域名解析服务器)

一。产生原因1.IP地址&#xff1a;是互联网上计算机唯一的逻辑地址&#xff0c;通过IP地址实现不同计算机之间的相互通信&#xff0c;每台联网计算机都需要通过IP地址来互相联系和分别&#xff0c;但由于IP地址是由一串容易混淆的数字串构成&#xff0c;人们很难记忆所有计算机…

MySql中的锁的分类

锁的分类 MySQL锁可以按模式分类为&#xff1a;乐观锁与悲观锁。按粒度分可以分为全局锁、表级锁、页级锁、行级锁。按属性可以分为&#xff1a;共享锁、排它锁。按状态分为&#xff1a;意向共享锁、意向排它锁。按算法分为&#xff1a;间隙锁、临键锁、记录锁。 二、全局锁、表…

3-petalinux2018.3 摸索记录 - 命令驱动 _ 交叉编译链

一、命令行控制GPIO 对于ps端设备&#xff0c;在板卡的linux系统中&#xff0c;切换到/sys/class/gpio路径下可以看到目前挂载的gpio设备。 export&#xff1a; 导入用户空间 gpiochip&#xff1a; 系统中gpio寄存器信息 unexport&#xff1a; 移除用户空间 以MIO40和MIO42…

数据结构------手撕链表(一)【不带头单向非循环】

文章目录 链表概念链表的使用LinkedList 的几种遍历方式单链表的模拟实现&#xff08;不带头&#xff09;链表面试题 观察ArrayList 顺序表的源码发现&#xff0c;底层是使用数组实现的。由于其底层是一段连续空间&#xff0c;当在ArrayList任意位置插入或者删除元素时&#xf…

Java基础(7)图书管理系统

目录 1.前言 2.正文 2.1思路 2.2Book包 2.3people包 2.4operation包 2.5主函数 3.小结 1.前言 哈喽大家好吖&#xff0c;今天来给前面Java基础的学习来一个基础的实战&#xff0c;做一个简单的图书管理系统&#xff0c;这里边综合利用了我们之前学习到的类和对象&…

研发运营一体化(DevOps)能力成熟度模型

目录 应用设计 安全风险管理 技术运 持续交付 敏捷开发管理 基于微服务的端到端持续交付流水线案例 应用设计 安全风险管理 技术运 持续交付

Android调用系统相机录像并设置参数

最近要做一个 Android上的录像功能&#xff0c;由于之前做拍照功能完全是用自定义方式&#xff0c;太麻烦。故这次决定直接调用系统相机来录像。 一、添加权限 首先&#xff0c;添加必要的权限 <!-- 授予该程序使用摄像头的权限 --><uses-permission android:name&q…

Could not find artifact cn.hutool:hutool-all:jar:8.1 in central 导入Hutool报错

<!-- https://mvnrepository.com/artifact/cn.hutool/hutool-all --><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.9</version></dependency> 引入hutool 8.1版本的工具…

攻防世界-流量分析WP

流量分析1来自 <攻防世界> 题目描述:流量分析&#xff0c;你知道这堆流量做了什么事情吗&#xff0c;你能恢复出来flag吗&#xff1f; 1&#xff0c;首先查看IPv4统计信息 如果该流量记录的是黑客的攻击行为产生的流量&#xff0c;那么出现频率最高的流量应该来自攻击者…

2024软考网络工程师笔记 - 第8章.网络安全

文章目录 网络安全基础1️⃣网络安全威胁类型2️⃣网络攻击类型3️⃣安全目标与技术 &#x1f551;现代加密技术1️⃣私钥密码/对称密码体制2️⃣对称加密算法总结3️⃣公钥密码/非对称密码4️⃣混合密码5️⃣国产加密算法 - SM 系列6️⃣认证7️⃣基于公钥的认证 &#x1f552…

论文笔记:LaDe: The First Comprehensive Last-mile Delivery Dataset from Industry

2023 KDD 1 intro 1.1 背景 随着城市化进程的加快和电子商务的发展&#xff0c;最后一公里配送已成为一个关键的研究领域 最后一公里配送&#xff0c;如图1所示&#xff0c;是指连接配送中心和客户的包裹运输过程&#xff0c;包括包裹的取件和配送除了对客户满意度至关重要外…

cpp的vector类

本篇将讲述vector类中的各种重要和常用函数&#xff08;begin&#xff08;&#xff09;、end&#xff08;&#xff09;、rbegin&#xff08;&#xff09;、rend&#xff08;&#xff09;cbegin&#xff08;&#xff09;、cend&#xff08;&#xff09; 、crbegin&#xff08;&a…

Vuejs设计与实现 — 渲染器核心:挂载与更新

前言 挂载 与 更新 是 渲染器 的核心功能&#xff0c;也是渲染器应该要提供的基本功能&#xff0c;而 挂载 和 更新 又是基于 VNode 虚拟节点的&#xff0c;因为 VNode 节点描述了其对应的 真实 DOM 应该是什么样子的。 挂载与卸载 VNode 节点 无论是 vue 还是 react 都引入…

k8s 综合项目笔记

综述 这篇笔记主要是为了记录下自己写 k8s 综合项目的过程。 由于自己之前已经写过简单的开发和运维项目&#xff0c;所以这里就结合一下&#xff0c;在搭建 k8s 集群后安装运维常用服务&#xff0c;比如 ansible 和 prometheus&#xff0c;用 NFS 实现数据存储同步&#xff0c…

鸿蒙中富文本编辑与展示

富文本在鸿蒙系统如何展示和编辑的&#xff1f;在文章开头我们提出这个疑问&#xff0c;带着疑问来阅读这篇文章。 富文本用途可以展示图文混排的内容&#xff0c;在日常App 中非常常见&#xff0c;比如微博的发布与展示&#xff0c;朋友圈的发布与展示&#xff0c;都在使用富文…

LeetCode_231. 2 的幂_java

1、题目 231. 2 的幂https://leetcode.cn/problems/power-of-two/ 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n &#xff0c;则认为 n 是 2 的幂次方…

ComfyUI初体验

ComfyUI 我就不过多介绍了&#xff0c;安装和基础使用可以看下面大佬的视频&#xff0c;感觉自己靠图文描述的效果不一定好&#xff0c;大家看视频比较方便。 ComfyUI全球爆红&#xff0c;AI绘画进入“工作流时代”&#xff1f;做最好懂的Comfy UI入门教程&#xff1a;Stable D…

ArcGIS001:ArcGIS10.2安装教程

摘要&#xff1a;本文详细介绍arcgis10.2的安装、破解、汉化过程。 一、软件下载 安装包链接&#xff1a;https://pan.baidu.com/s/1T3UJ7t_ELZ73TH2wGOcfpg?pwd08zk 提取码&#xff1a;08zk 二、安装NET Framework 3.5 双击打开控制面板&#xff0c;点击【卸载程序】&…

dbt-codegen: dbt自动生成模板代码

dbt项目采用工程化思维&#xff0c;数据模型分层实现&#xff0c;支持描述模型文档和测试&#xff0c;非常适合大型数据工程项目。但也需要用户编写大量yaml描述文件&#xff0c;这个过程非常容易出错且无聊。主要表现&#xff1a; 手工为dbt模型编写yaml文件&#xff0c;这过…

STM32传感器模块编程实践(十一) ADC模数转换模块ADS1115简介及驱动源码

文章目录 一.概要二.ADS1115芯片介绍三.ADS1115芯片主要特性四.ADS1115模块接线说明五.ADS1115参考原理图六.通讯协议介绍七.STM32单片机与ADS1115模块实现电压采集实验1.硬件准备2.软件工程3.软件主要代码4.实验效果 八.源代码工程下载九.小结 一.概要 ADC&#xff0c;全称为…