程序员经验分享-hwhale

VUE父组件监听$emit事件，如何传递多个父组件自己的参数

2023-11-13

背景

子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数

父组件监听事件传参有两种方式

方式1：父组件自己无参数

方法名可以不用带参数，函数中的e代表change事件的对象，直接获取参数即可

<uni-rate value="5" @change="clickStar" :activeColor="star[index[0]].color" size="25.5" margin="6.5" 

clickStar(e){
				this.$set(this.index,e.value)			
			}

方式2：父组件传递自己的参数

父元素引入了多个组件，我们想区分具体是哪个组件触发了change事件

<uni-rate value="5" @change="clickStar($event,0)" :activeColor="star[index[0]].color" size="25.5" margin="6.5" style="margin:30upx 0upx;">星星</uni-rate>
<uni-rate value="5" @change="clickStar($event,1)" :activeColor="star[index[0]].color" size="25.5" margin="6.5" style="margin:30upx 0upx;">星星</uni-rate>
<uni-rate value="5" @change="clickStar($event,2)" :activeColor="star[index[0]].color" size="25.5" margin="6.5" style="margin:30upx 0upx;">星星</uni-rate>

父组件用$event代表change事件对象，后面传递父元素自己的参数

clickStar(e,idx){
				this.$set(this.index,idx,e.value-1)			
			}

事件中根据位置传参，e代表了事件对象，idx代表了父元素自己的第一个参数。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端技术

VUE父组件监听$emit事件，如何传递多个父组件自己的参数 的相关文章

随机推荐

  • React + antd实现嵌套可增减表单

    技术栈 React antd 接到需求 做一个form嵌套表单 刚开始想自己做一个 后来想着参数处理可能比较麻烦就直接用antd的Form吧 一 目标效果 先看一下效果图 其中点击新增标签及配置时可以加一个红色框里的内容 点击蓝框里的加号可

  • 将 VEDAI 遥感图像数据集转为 PASCAL VOC 格式

    PASCAL VOC 格式的 VEDAI 数据集 只有JPEGImages和Annotations 地址 所需积分 C币 0 VEDAI 数据集共有11类 类别和所对应的 label 如下表所示 类别 car truck tractor c

  • 使用python抓取天涯帖子，并实现“只看楼主”功能

    使用python抓取天涯帖子 并实现 只看楼主 功能 在看天涯论坛时 有些帖子很有价值 想把它保存下来 可是好的帖子动辄几百页 其中又掺杂了很多灌水和撕逼 所以我编写了一个python小程序 将一个帖子中楼主所发的内容抓取下来 挺好用的 唯

  • TypeScript入门总结

    一 类型注解 如 number是类型注解 具体分为 原始类型 数组类型2 联合类型 类型别名type 交叉 keyof 获取key字面量 函数类型2 void不确定函数返回值 可选参数 不确定参数 对象类型 字面量类型 类似const 接口

  • Linux文件误删除恢复操作

    本文参考http write blog csdn net postedit ticket ST 491405 OGjDDusZeyMgVQ7bHW7f passport csdn net 前言 作为一个多用户 多任务的操作系统 Linux下

  • 将mysql中的数据移到另一个数据库中

    1 导出整个数据库 mysqldump u 用户名 p 数据库名 gt 导出的文件名 mysqldump u admin p vmiplatform gt sql sql 运行结果如下 2 导出一个表 mysqldump u 用户名 p 数

  • 解决node里面的中文乱码

    今天咋学习node的时候 跟着视频里在撸代码 但是却出现了中文乱码的情况 视频中的谷歌浏览器可能和我的版本不一致 先看代码吧 use strict const http require http let count 0 const serv

  • linux系统中文件名通配符的使用方法

    linux系统中文件名通配符的使用方法 常用的四种 匹配任意字符 匹配任意单个字符 指定范围的匹配 e g a z 0 9 a zA Z 不匹配通配符内的信息 e g a Z

  • 继承的详解

    继承 继承基础 继承方式 继承中的对象模型 继承中构造和析构顺序 继承同名成员处理方式 继承同名静态成员处理方式 多继承语法 菱形继承 继承基础 继承得好处 减少重复代码 语法 class 子类 继承方式 父类 子类也称为 派生类 父类也称

  • java底层实现定时延时的途径

    Timer定时器 时间间隔示意 例子一 public class TestTimer private static Timer timer new Timer private static Logger logger LoggerFacto

  • (转载）Twain 学习纪录

    一 TWAIN的文件组成 TWAIN共包括4个二进制文件 如果要使用该接口 就必须要保证他们被成功地安装在本地计算机上 文 件 名 说 明 TWAIN 32 DLL 32位应用程序的支持文件 32位程序使用TWAIN通讯必须使用该文件 TW

  • java 各省市区代码表

    因最近项目开发需要用到全国各省市区的城市编码 网上找了好久 终于找到了非常全的 现记录一下 方便以后使用 DROP TABLE IF EXISTS region CREATE TABLE region id int 10 NOT NULL

  • OpenCL-学习教程（二）

    经过两天的摸爬滚打 基本上了解了opencl的并行处理的原理和内部调用机制 也上手写代码调试了几个工程 总体感觉opencl会比cuda比起来更复杂一些 但不得不说 平台的兼容性更好 而且调试应该方便些 虽然我的VS调试配置环境始终有问题

  • python的itchat模块

    今天一不小心发现的python的好玩模块itchar 首先 安装 pip install itchat 1 搜索微信好友信息 import itchat itchat auto login hotReload True 登入 friends

  • MTK 调试记录

    MT8788 MT8183 使用CC1 CC2做OTG检测 CONFIG MTK USB TYPEC U3 MUX 关闭 打开一下宏 CONFIG TCPC CLASS y CONFIG TCPC MT6370 y CONFIG MTK U

  • 常见等价无穷小

    当 x 0 时 等 价 无 穷

  • c++stl和std_std :: replace（）函数以及C ++ STL中的示例

    c stl和std C STL std replace 函数 C STL std replace function replace function is a library function of algorithm header it

  • IntelliJ IDEA的项目配置和创建项目（四）

    一 配置JDK 按 Ctrl Shift Alt S 快捷键就会弹出项目配置区 如下图 第一个红色区域是配置JDK的地方 第二个红色区域指的是项目编译后输出的路径 如果要设置Modules项目的jdk 那么可以在这一行设置 二 创建项目 创

  • MyBatis-Plus 官方文档

    myBatis plus 官方文档 https mp baomidou com

  • VUE父组件监听$emit事件，如何传递多个父组件自己的参数

    背景 子组件可以通过this emit change parm value1 parm2 value2 传递多个参数 父组件监听事件传参有两种方式 方式1 父组件自己无参数 方法名可以不用带参数 函数中的e代表change事件的对象 直接获

热门标签