uniapp实战:父子组件对象数组传参

news2024/10/6 4:11:35

     需求说明
     1.父组件传参给子组件
         1.1子组件中定义属性unitList
         1.2 父组件中将data中的unitList传递给子组件
     2.子组件向父组件传参
         2.1子组件设置用户名文本框以及切换操作属性
         2.2 子组件对应操作(文本输入以及按钮切换)添加自定义事件
         2.3 父组件接收子组件自定义事件
     3.完整代码
     4.父子组件传参父组件数据同步但页面显示不同步问题处理

1.elementUI中textarea本设置换行显示

需求说明

    上一篇uniapp实战:父子组件传参之子组件数量动态变化介绍了如何动态添加子组件,这一篇讲一下如何实现父子组件传参.最终实现效果是可以从各个子组件中输入自定义昵称以及设置是否为自己,点击创建按钮时可获取各个组件的内容.
在这里插入图片描述

1.父组件传参给子组件

    首先先看父组件传参给子组件,分别设置各子组件昵称为1、2、3、4。

1.1子组件中定义属性unitList 

props:{
		     unitList: {
		     					type: Array,
								default: [{
										"userName":"",
										"userImg":"",
										"setMe":true,
										"unitId":0
										}],
		     					required: false
		     				}				
		   }

1.2 父组件中将data中的unitList传递给子组件

    父组件标签：

<setFriend class="addUnit" 
				v-for="(unitItem,index) in unitList" :unitList="unitList" ></setFriend>

    父组件data数据：

data() {
			return {
				unitList:[
					{
						"userName":"1",
						"userImg":"",
						"setMe":true,
						"unitId":0
					},
					{
						"userName":"2",
						"userImg":"",
						"setMe":true,
						"unitId":0
					},
					{
						"userName":"3",
						"userImg":"",
						"setMe":true,
						"unitId":0
					},
					{
						"userName":"4",
						"userImg":"",
						"setMe":true,
						"unitId":0
					}
					]
			}
		}

2.子组件向父组件传参

    这里使用的办法是子组件中使用$emit添加自定义事件，父组件中使用@自定义事件名来接收子组件属性变化。涉及到的操作是输入框中输入内容，父组件中的用户昵称需要动态变化，设置是否为自己按钮切换也需要实现父组件中对应内容动态变化。

2.1子组件设置用户名文本框以及切换操作属性 

props:{
			setMe: {
								type: Boolean,
								default: false,
								required: false
					},
			userName:{
				type: String,
				default: "xaiohon",
				required: false
			}				
		   }

2.2 子组件对应操作(文本输入以及按钮切换)添加自定义事件 

<input class="name"  placeholder="请输入昵称" @input="changeUserName()" v-model="subUserName"/>
				<view class="set-me">
					<text>设置为自己</text>
					<switch :checked="setMe" @change="switchChange" />
				</view>

事件执行内容:

methods:{
			switchChange(){
				var unitInfo={
					"userName":this.subUserName,
					"unitId":this.unitId,
					"setMe":!this.setMe
				}
				this.$emit("setMeChange",unitInfo)
			},
			changeUserName(){
				var unitInfo={
					"userName":this.subUserName,
					"unitId":this.unitId,
					"setMe":this.setMe
				}
				this.$emit("userNameChange",unitInfo)
			}
			
		}

2.3 父组件接收子组件自定义事件

父组件标签:

<setFriend class="addUnit" 
				@userNameChange="getSubUserName"
				@setMeChange="getSubSetMe"></setFriend>
				<view class="addUnitClass" @click="addUnit">

父组件接收子组件自定义事件内容:

getSubUserName(e){
				console.log("singleFrind_getSubUserName_e:",e)
			},
			getSubSetMe(e){
				console.log("singleFrind_getSubSetMe_e:",e)
			},

    这样就能将对应的子组件中的内容获取到了,剩下的就是添加到集合中,这里不在赘述.

3.完整代码

子组件:

<template>
	<view>
		<view class="unit">
			<image class="close_img" src="../../static/close_button.png" @click="closeUnit()"></image>
			<view class="uni_item">
				<image class="upload_img" src="../../static/upload_img.png"></image>
				<!-- <input class="name"  placeholder="请输入昵称" @input="changeUserName()" v-model="subUserName"/> -->
				<input class="name"  placeholder="请输入昵称" @input="changeUserName()" v-model="subUserName"/>
				<view class="set-me">
					<text>设置为自己</text>
					<switch :checked="setMe" @change="switchChange" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"setFriend",
		data() {
			return {
				subUserName:this.userName+"--"+this.unitId,
				subUnitId:this.unitId
			};
		},
		props:{
		     unitList: {
		     					type: Array,
								default: [{
										"userName":"",
										"userImg":"",
										"setMe":true,
										"unitId":0
										}],
								// default:[],
		     					required: false
		     				},
			setMe: {
								type: Boolean,
								default: false,
								required: false
					},
			userName:{
				type: String,
				default: "xaiohon",
				required: false
			},
			unitId:{
				type: Number,
				default: 0,
				required: false
			}						
		   },
		methods:{
			closeUnit(){
				console.log("closeUnit:this.unitList:",this.unitList)
				this.$emit("closeUnitChange",this.subUnitId)
			},
			switchChange(){
				var unitInfo={
					"userName":this.subUserName,
					"unitId":this.unitId,
					"setMe":!this.setMe
				}
				this.$emit("setMeChange",unitInfo)
			},
			changeUserName(){
				var unitInfo={
					"userName":this.subUserName,
					"unitId":this.unitId,
					"setMe":this.setMe
				}
				this.$emit("userNameChange",unitInfo)
			}
			
		}
	}
</script>

<style lang="scss">
	uni-page-body,page {
				height:100%;
				background-color: rgb(242, 242,242);
			}
	.unit{
		width: 90%;
		height: 150px;
		background-color: white;
		margin-top: 9px;
		margin-left: 5px;
		border-radius: 5px;
		position: relative;
		left: 1px;
		.close_img{
			width: 20px;
			height: 20px;
			position: absolute;
			left:140px;
			top:-8px;
		}
		.uni_item{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.upload_img{
				width:65px;
				height: 65px;
				margin-bottom: 10px;
			}
			.name{
				border: 1px gray solid;
				border-radius: 5px;
				width: 95%;
				margin-bottom: 10px;
			}
			.set-me{
				width: 100%;
				height: 10%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					font-size: 12px;
				}
				switch{
					transform:scale(0.5)
				}
			}
		}
		
	}

</style>

父组件:

<template>
	<view class="out">
		<view class="content">
			<view class="setting">
				<setFriend class="addUnit" 
				v-for="(unitItem,index) in unitList" :unitList="unitList" :key="index" 
				:setMe="index == 0 ? true:false"
				@userNameChange="getSubUserName"
				@setMeChange="getSubSetMe"
				@closeUnitChange="getUnitList"
				:unitId="index"
				:userName="unitItem.userName"></setFriend>
				<view class="addUnitClass" @click="addUnit">
					<image class="add_unit_img" src="../../static/add_unit.png"></image>
				</view>
			</view>
			<button @click="test">创建</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				unitList:[
					{
						"userName":"1",
						"userImg":"",
						"setMe":true,
						"unitId":0
					},
					{
						"userName":"2",
						"userImg":"",
						"setMe":true,
						"unitId":0
					},
					{
						"userName":"3",
						"userImg":"",
						"setMe":true,
						"unitId":0
					},
					{
						"userName":"4",
						"userImg":"",
						"setMe":true,
						"unitId":0
					}
					]
			}
		},
		methods: {
			test(){
				this.unitList.splice(0, 1);
				console.log(this.unitList)
			},
			addUnit(){
				this.unitList.push({
					"userName":"4",
					"userImg":"",
					"setMe":true,
					"unitId":this.unitList.length
				})
				console.log("addUnit this.unitList:",this.unitList)
			},
			getSubUserName(e){
				console.log("singleFrind_getSubUserName_e:",e)
			},
			getSubSetMe(e){
				console.log("singleFrind_getSubSetMe_e:",e)
			},
			getUnitList(e){
				console.log("getUnitList e:",e)
				console.log("singleFrind_unitList_old:",this.unitList)
				if(this.unitList.length != 0){
					this.unitList.splice(e, 1);
				}
				console.log("singleFrind_unitList:",this.unitList)
			}
		}
	}
</script>

<style lang="scss">
	uni-page-body,page {
				height:100%;
				background-color: rgb(242, 242,242);
			}
	.out{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		margin: auto;
		.content{
			width: 100%;
			// height: 400px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.setting{
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-direction: row;
				flex-wrap:wrap;
				.addUnit{
					width: 50%;
					height: 150px;
					margin-bottom: 15px;
				}
				.addUnitClass{
					position: relative;
					top: 10px;
					margin-left: 7px;
					width: 45%;
					height: 150px;
					margin-bottom: 15px;
					background-color: white;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px;
					.add_unit_img{
						width: 80%;
						height: 80%;
					}
				}
				
				
			}
			button{
				position: relative;
				top: 10px;
				width: 100%;
				background-color: #55aaff;
			}
		}
	}		

	

</style>

4.父子组件传参父组件数据同步但页面显示不同步问题处理

补充记录一下这个问题,对于存在多个子组件非父组件,如果点击任意子组件右上角关闭按钮,出现的场景是子组件数量会减少,但是减少的是总是最后一个组件.但是打印父组件中的子组件集合发现数据是正确的,但是页面显示不正确.处理的办法就是在子组件for循环调用处使用v-if设置是否显示强制刷新dom.

<view class="setting" v-if="showUnitList">
				<setFriend  class="addUnit" 
				v-for="(unitItem,index) in unitList"  :key="index" 
				@closeUnitChange="getUnitList"
				:unitId="index"
				:userName="unitItem.userName"></setFriend>
				<view class="addUnitClass" @click="addUnit">
					<image class="add_unit_img" src="../../static/add_unit.png"></image>
				</view>
			</view>

子组件中右上角关闭方法:

export default {
		name:"setFriend",
		data() {
			return {
				subUnitId:this.unitId
			};
		},
		props:{
			unitId:{
				type: Number,
				default: 0,
				required: false
			}
		methods:{
			closeUnit(){
				this.$emit("closeUnitChange",this.subUnitId)
			}
			
		}
	}

父组件关闭事件

getUnitList(e){
			if(this.unitList.length != 0){
				this.unitList.splice(e, 1);
				this.showUnitList = false
				this.$nextTick(() => {
					this.showUnitList = true
				})	
			}
			console.log("singleFrind_unitList:",this.unitList)
		}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【学习笔记】深度学习实战 | LeNet

【学习笔记】深度学习实战 | LeNet

简要声明 学习相关网址 [双语字幕]吴恩达深度学习deeplearning.aiPapers With CodeDatasets 深度学习网络基于PyTorch学习架构&#xff0c;代码测试可跑。本学习笔记单纯是为了能对学到的内容有更深入的理解&#xff0c;如果有错误的地方&#xff0c;恳请包容和指正。 参考文献…
阅读更多...
C# 获取类型 Type.GetType()

C# 获取类型 Type.GetType()

背景 C#是强类型语言&#xff0c;任何对象都有Type&#xff0c;有时候需要使用Type来进行反射、序列化、筛选等&#xff0c;获取Type有Type.GetType, typeof()&#xff0c;object.GetType() 等方法&#xff0c;本文重点介绍Type.GetType()。 系统类型/本程序集内的类型 对于系…
阅读更多...
C++——模板详解

C++——模板详解

目录 模板 函数模板 显示实例化 类模板 模板特点 模板 模板&#xff0c;就是把一个本来只能对特定类型实现的代码&#xff0c;变成一个模板类型&#xff0c;这个模板类型能转换为任何内置类型&#xff0c;从而让程序员只需要实现一个模板&#xff0c;就能对不同的数据进行操…
阅读更多...
2024年 前端JavaScript Web APIs 第二天 笔记

2024年 前端JavaScript Web APIs 第二天 笔记

Web APIs 第二天 2.1 -事件监听以及案例 2.2 -随机点名案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><t…
阅读更多...
Git分布式版本控制系统——git学习准备工作

Git分布式版本控制系统——git学习准备工作

一、Git仓库介绍 开发者可以通过Git仓库来存储和管理文件代码&#xff0c;Git仓库分为两种&#xff1a; 本地仓库&#xff1a;开发人员自己电脑上的Git仓库 远程仓库&#xff1a;远程服务器上的Git仓库 仓库之间的运转如下图&#xff1a; commit&#xff1a;提交&#xff…
阅读更多...
Pytorch 复习总结 4

Pytorch 复习总结 4

Pytorch 复习总结&#xff0c;仅供笔者使用&#xff0c;参考教材&#xff1a; 《动手学深度学习》Stanford University: Practical Machine Learning 本文主要内容为&#xff1a;Pytorch 深度学习计算。 本文先介绍了深度学习中自定义层和块的方法&#xff0c;然后介绍了一些…
阅读更多...
Doccano 修复 spacy.gold 的bug

Doccano 修复 spacy.gold 的bug

引言 最初只是想把Doccano标注的数据集转换成BIO(类似conll2003数据集)的标注格式&#xff1b; 按照PR的修改意见实现了修改&#xff0c;但是本人不建议这么做&#xff1b; 应该随着Doccano的升级&#xff0c;Doccano的导出格式发生了变化&#xff0c;而原来的doccano-transfo…
阅读更多...
正确认识肠道内脆弱拟杆菌——其在健康的阴暗面和光明面

正确认识肠道内脆弱拟杆菌——其在健康的阴暗面和光明面

谷禾健康 脆弱拟杆菌(Bacteroides fragilis)是拟杆菌门拟杆菌属的重要成员。事实上&#xff0c;脆弱拟杆菌因其免疫调节功能而成为该属中研究最多的共生微生物。它是革兰氏阴性、不形成孢子、杆状专性厌氧菌。在人类健康中扮演着复杂而双面的角色。 这种革兰氏阴性专性厌氧菌常…
阅读更多...
架构设计方法（4A架构）-信息架构

架构设计方法（4A架构）-信息架构

1、 信息架构&#xff08;IA&#xff09;&#xff1a;现实事物在IT世界的建模体现 2、数据资产目录 3、 识别业务对象&#xff1a;业务对象的设计方法 设计方法 1.基于业务流程识别业务活动。 2. 识别业务流程中每个业务活动的输入、输出等BI&#xff08;Business Item&#…
阅读更多...
Zabbix企业运维监控工具

Zabbix企业运维监控工具

Zabbix企业级监控方案 常见监控软件介绍 Cacti Cacti是一套基于 PHP、MySQL、SNMP 及 RRD Tool 开发的监测图形分析工具&#xff0c;Cacti 是使用轮询的方式由主服务器向设备发送数据请求来获取设备上状态数据信息的,如果设备不断增多,这个轮询的过程就非常的耗时&#xff0…
阅读更多...
SpringBoot源码解读与原理分析(三十七)SpringBoot整合WebMvc(二)DispatcherServlet的工作全流程

SpringBoot源码解读与原理分析(三十七)SpringBoot整合WebMvc(二)DispatcherServlet的工作全流程

文章目录 前言12.4 DispatcherServlet的工作全流程12.4.1 DispatcherServlet#service12.4.2 processRequest12.4.3 doService12.4.3.1 isIncludeRequest的判断12.4.3.2 FlashMapManager的设计 12.4.4 doDispatch12.4.4.1 处理文件上传请求12.4.4.2 获取可用的Handler&#xff0…
阅读更多...
Vue+SpringBoot打造农村物流配送系统

Vue+SpringBoot打造农村物流配送系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统登录、注册界面2.2 系统功能2.2.1 快递信息管理&#xff1a;2.2.2 位置信息管理&#xff1a;2.2.3 配送人员分配&#xff1a;2.2.4 路线规划&#xff1a;2.2.5 个人中心&#xff1a;2.2.6 退换快递处理&#xff1a;…
阅读更多...
5G时代对于工业化场景应用有什么改善

5G时代对于工业化场景应用有什么改善

5G 不仅仅是 4G 的技术升级&#xff0c;而是将平板电脑和智能手机的技术升级。除了更好的高清视频流和其他高带宽应用&#xff0c;消费者不会注意到很多性能差异。然而&#xff0c;在工业领域&#xff0c;5G 代表着巨大的飞跃。 在工厂和厂房内&#xff0c; 设备的Wi-Fi 网络经…
阅读更多...
低功耗运放D722，具有9MHz的高增益带宽积，转换速率为8.5V/μs

低功耗运放D722，具有9MHz的高增益带宽积，转换速率为8.5V/μs

D722是低噪声、低电压、低功耗运放&#xff0c;应用广泛。D722具有9MHz的高增益带宽积&#xff0c;转换速率为8.5V/μs&#xff0c;静态电流为1.7mA&#xff08;5V电源电压&#xff09;。D722具有低电压、低噪声的特点&#xff0c;并提供轨到轨输出能力&#xff0c;D722的最大输…
阅读更多...
本地maven库缓存导入私库

本地maven库缓存导入私库

为了加速编译代码&#xff0c;想将本地maven缓存导入内网私库使用。 脚本网上搜的 #!/bin/bash # copy and run this script to the root of the repository directory containing files # this script attempts to exclude uploading itself explicitly so the script name …
阅读更多...
C++指针（二）

C++指针（二）

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 文章目录 1.数组指针 1.1数组指针的概念 1.2数组指针的用处 1.3数组指针的操作 1.4二维数组如何访问 1.5数组指针访问流程 1.6数组指针的练习题 2.指针数组 2.1指针数组的概念 2.2指针数组的用处 2…
阅读更多...
AMEYA360：航顺车规级MCU HK32AUTO39A的汽车侧滑门控制方案

AMEYA360：航顺车规级MCU HK32AUTO39A的汽车侧滑门控制方案

汽车滑门因侧开启方式与传统车门相比&#xff0c;具有易泊车、开启宽度大和方便乘员货物进出的优点&#xff0c;很受消费者的青睐。汽车市场上&#xff0c;无论是面向高端的商务豪华MPV&#xff0c;还是面向城市物流的轻型客车和低端客运微型车都采用了汽车机械滑门系统。 汽车…
阅读更多...
韦东山嵌入式Liunx入门驱动开发三

韦东山嵌入式Liunx入门驱动开发三

文章目录 一、GPIO和Pinctrl子系统的使用1-1 Pinctrl子系统1-2 GPIO子系统1-3 基于GPIO子系统的LED驱动程序 本人学习完韦老师的视频&#xff0c;因此来复习巩固&#xff0c;写以笔记记之。 韦老师的课比较难&#xff0c;第一遍不知道在说什么&#xff0c;但是坚持看完一遍&…
阅读更多...
死记硬背spring bean 的生命周期

死记硬背spring bean 的生命周期

1.bean的生命周期 我们平常经常使用类似于new Object()的方式去创建对象&#xff0c;在这个对象没有任何引用的时候&#xff0c;会被gc给回收掉。而对于spring而言&#xff0c;它本身存在一个Ioc容器&#xff0c;就是用来管理对象的&#xff0c;而对象的生命周期也完全由这个容…
阅读更多...
为什么软考报名人数越来越多？

为什么软考报名人数越来越多？

2020年软考报名人数404666人&#xff0c;广东省报考人数超过14万人。 ●2021年软考通信考试报名人数突破100万人&#xff0c;估计软考有90多万。 ●2022年软考通信考试共129万人&#xff0c;估计软考占了120多万人。 ●2023年软考具体报名人数没有公布&#xff0c;但工业和信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023