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

已于 2024-04-01 15:02:22 修改
阅读量2.6k 收藏 7
点赞数 4
文章标签： uni-app java 父子组件传参
于 2024-03-01 13:20:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43401380/article/details/136391630
版权
本文详细介绍了在uniapp项目中，如何通过Vue的props和自定义事件实现父子组件间的传参，包括父组件向子组件传参、子组件向父组件反馈数据，并针对数据同步问题提供了解决方案，确保页面显示与实际数据一致。
摘要由CSDN通过智能技术生成

     需求说明
     1.父组件传参给子组件
         1.1子组件中定义属性unitList
         1.2 父组件中将data中的unitList传递给子组件
         1.3 父传子,子组件将属性保存
     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
					}
					]
			}
		}

1.3 父传子,子组件将属性保存

父传子过程中,子组件prop属性中的内容只存在于父传给子的一次事件中,不会长期存储,如果想在子组件中保存父组件传过来的值并多次使用可以在子组件中data中自定义属性存储.示例:
子组件submit中接收父组件的属性currentGroupName,但是子组件多次使用获取currentGroupName时发现为空,使用一次就没有问题,原因就是没有进行存储,可以按照下面方式进行存储.
子组件submit:

export default {
		data() {
			return {
				groupName:this.currentGroupName // 此处将父组件传递给子组件的属性值进行保存
			};
		},
		props:{
			currentGroupName:{
				type: String,
				default: "",
				required: false
			}
		}

父组件传参:

<submit	:currentGroupName="currentGroupName"	></submit>
export default {
		data() {
			return {
				currentGroupName: // 群聊名
			};
		}
		}

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)
		}
卖柴火的小伙子
关注
uniapp中父组件向子组件传数据
weixin_45648000的博客
01-04 809
使用组件时写入数据 parent.vue //其中msg="123"就是需要传的数据 <template> <div> 我是父组件 <son msg="123"></son> </div> </template> 子组件接收数据 son.vue <script> export default{ props:['msg'] } </script> 子组件使用数据 //其中msg会被替换成
uniapp 组件传参
xiaoyuomline的博客
04-20 1150
<template> <view class="content" :style="[{background:backGround}]"> <button @tap="passValue">点击传值</button> </view> </template> <script> export default { props:{ backGround:{ type:String, default:"#fff" } }, methods:{ passValu
uniapp中页面之间参数的传递
最新发布
chenhuan9的博客
08-21 259
1.表单提交数据后使用navigateBack，解决点击列表页返回再次跳转到表单页面的问题。表单提交后返回的页面。
uniapp中父子组件的传值
qq_36158551的博客
06-06 1313
官方文档：https://uniapp.dcloud.io/vue-components?id=props在父组件中赋值时加上 .sync，在子组件中使用 this.$emit(‘update:title’,“uni-app”)改变值.sync 修饰符当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。.sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。-- 父组件 --><template><view></view><script>
uniapp 父子组件传递参数
qq_33240556的博客
03-22 846
来获取对子组件的引用，从而可以直接调用子组件的方法或访问其内部状态，这通常是在需要进行更复杂交互时采用的方式。不过，尽量遵循单向数据流原则，避免过度依赖这种方式来通信。另外，虽然不是专门针对父子组件数据传递的标准方法，但有时候也会用到。
uniapp组件传参方式梳理
weixin_43401380的博客
01-26 6277
整理常用的几种组件传参方式,数据处理更加丝滑!!!
uni-app入门:自定义组件实现父子组件参数传递
weixin_43401380的博客
11-28 5637
uni-app入门实战:自定义组件实现父子组件参数传递
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready(2)
2401_84447207的博客
05-04 1247
与html文件相关的cssjs等本地资源，同样放在这个目录下。这个hybrid目录不会被编译器编译，所以这里的不能放vue文件，而其他目录也不能放本地HTML文件。未来hybrid目录还会支持其他语言在uni-app的中的混合使用。
app前端开发，CSS盒模型概述
m0_60210205的博客
07-21 327
第一个阶段，开发环境和工具准备 浏览器 （Google，FireFox，…） 下载，安装前端开发工具vscode， 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境 下载、配置PHP和MySQL 第二个阶段，前端入门，网页制作 1，HTML： 常用标签（div标签，p标签，span标签，a标签，img标签） 锚点 列表标签（有序列表，无序列表，自定义列表） 表单标签 表格标签 标签分类 标签语义化 注释 字符实体 2，CSS： CSS介绍 全局
2022前端知识整理：十、vue基础
weixin_42373976的博客
07-15 990
2022前端知识整理：第十部分、vue基础，仅包含vue2.0相关知识，建议先完成html5、css3和JavaScript ES6之后再学习。部分图片未上传成功，稍后完善，请见谅。
CSS如何清除默认样式，背景属性
m0_60227576的博客
07-21 866
第一个阶段，开发环境和工具准备 浏览器 （Google，FireFox，…） 下载，安装前端开发工具vscode， 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境 下载、配置PHP和MySQL 第二个阶段，前端入门，网页制作 1，HTML： 常用标签（div标签，p标签，span标签，a标签，img标签） 锚点 列表标签（有序列表，无序列表，自定义列表） 表单标签 表格标签 标签分类 标签语义化 注释 字符实体 2，CSS： CSS介绍 全局
html前端技术开发，android前端开发框架
m0_60228652的博客
07-24 675
第一个阶段，开发环境和工具准备 浏览器 （Google，FireFox，…） 下载，安装前端开发工具vscode， 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境 下载、配置PHP和MySQL 第二个阶段，前端入门，网页制作 1，HTML： 常用标签（div标签，p标签，span标签，a标签，img标签） 锚点 列表标签（有序列表，无序列表，自定义列表） 表单标签 表格标签 标签分类 标签语义化 注释 字符实体 2，CSS： CSS介绍 全局
uniapp父子组件传值
zmyalh的博客
01-29 501
uniapp父子组件传值 在components中创建组件mps/mps.vue 在要使用的页面调用组件方法 <mps :msg="msg" @showFaceDia="showFaceDias" ref="mps"></mps> 父传子 通过data下定义的msg传给子页面 props:['msg'], 子传父 通过showFaceDias父页面定义的方法接受值 //子页面把值传给父页面的方法中 this.$emit('showFaceDia',"$emit我就是子页面的值传
uniapp 父子组件传值 -- 跳转传递参数 -- 解决传参报错
H524268015wsw的博客
08-07 3667
同时要把子组件的名称标签放在视图中，传值会用到，例如我这里子组件就叫son，所以要在父组件视图中写上标签，子组件的操作即使props接收，再用插值语法 {{}} 显示在视图上。想象一下，父子组件传值，就类似于父亲给儿子东西，父亲给儿子的东西要有名字吧，名字就是属性，父亲给儿子东西，儿子要用手接过来，那手就相当于子组件里的props。子组件：因为传递的是一个对象，所以type的属性值应该是一个Object，默认值default是一个{}，不写default的值也不会有影响。...
uniapp和vue组件之间的传值方法（父子传值，兄弟传值，跨级传值，vuex）
铁锤妹妹的博客
10-31 1万+
在做vue项目或者uniapp开发微信小程序时，经常会用到组件之间传值，因此想总结记录下。
uni-app父子组件传递数据
lw18751836671的专栏
03-18 9669
新建项目 新建组件 <template> <view> edit </view> </template> <script> export default { } </script> <style scoped lang="less"> </style> 组件里面没啥内容，就一个纯粹的模板。 在index.vue中引入并注册组件， <script> import user
uniapp父子组件之间传值
热门推荐
weixin_43167546的博客
07-15 1万+
组件传值 一. 父组件向子组件传值 通过props来实现, 子组件通过props来接收父组件传过来的值 父组件 // 1. 引入子组件 import zi from '../../components/zi.vue' // 2. 在components中对子组件进行注册 export default { components:{ zi } } <!-- 以标签的形势载入; 通过数据绑定的形势进行传值 --> <zi :userInfo="张三"><
父子组件之间的传参
weixin_44707050的博客
07-15 1635
1.父组件 <div>父组件</div> 2.子组件 <div>子组件</div> 3.父组件给子组件传参 ------------------父组件 <template> <!-- 通过:msgA=""给子组件传值 --> <div :msgA="msg">父组件</div> </template> <script> export default { data()
uniapp父子组件传参
06-13
在uniapp中，父组件向子组件传递参数可以通过props属性来实现。具体步骤如下： 1. 在子组件中定义props属性，用于接收父组件传递的参数： ``` export default { props: { message: { type: String, default: '' } }, // ... } ``` 2. 在父组件中引用子组件时，通过v-bind指令向子组件传递参数： ``` <template> <child-component :message="hello"></child-component> </template> ``` 其中，hello是父组件中的一个变量或者表达式，通过v-bind指令绑定到子组件的message属性上。 3. 子组件中可以通过this.message来获取父组件传递的参数。例如： ``` export default { props: { message: { type: String, default: '' } }, // ... mounted() { console.log(this.message); // 输出：hello world } } ``` 通过以上步骤，就可以实现uniapp父子组件之间的参数传递了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卖柴火的小伙子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值