欢迎光临
我的个人博客网站

uni-app开发经验分享九: 组件传值

一、父组件向子组件传值

通过props来实现,子组件通过props来接收父组件传过来的值!

1、逻辑梳理

父组件中:

第一步:引入子组件;

import sonShow from '../../component/son.vue'; 

第二步:在components中对子组件进行注册;

components: { 			sonShow 		}, 

第三步:以标签的形式载入;通过数据绑定的形式进行传值~

<son-show :reciveUserInfo="userInfo"></son-show> 

子组件中:

通过props接收父组件中传过来的值;

props:["reciveUserInfo"], 

2、代码展示

父组件index.vue

<template> 	<view class="content"> 		<son-show :reciveUserInfo="userInfo"></son-show> 	</view> </template>   <script> 	import sonShow from '../../component/son.vue'; 	export default { 		components: { 			sonShow 		}, 		data() { 			return { 				userInfo: [{ 						"userName": "kaliwo", 						"age": "19" 					}, 					{ 						"userName": "lihuahua", 						"age": "39" 					} 				] 			} 		} 	} </script> 

子组件son.vue

<template> 	<view class=""> 		<block  v-for="(item,index) in reciveUserInfo" :key="index"> 			<view class="mesg"> 				<text>{{item.userName}}</text> 				<text>{{item.age}}</text> 			</view> 		</block> 	</view> </template>   <script> 	export default{ 		props:["reciveUserInfo"], 	} </script> <style> 	.mesg{ 		display: flex; 		flex-direction: column; 		align-items: center; 	} </style>     

3、结果

uni-app开发经验分享九: 组件传值

四、说明

对于一些详情页,比如有时我们需要点赞数量+1,-1的效果;但是,由于子组件不能改变父组件的值,所以直接操作从父组件接收的值进行更改是没有效果的!就像如下:

     let list = that.reciveUserInfo; 	    for(var i in list){ 		let tempAge = list[i].age + 1; 		list[i].age = tempAge; 		that.reciveUserInfo = list; 	} 

年龄还是没有改变。所以应该怎么做了?

把从父组件接收到的值reciveUserInfo赋给一个新的变量mesgShow,对这个新的变量进行操作,然后用对齐进行渲染即可!

let list = that.reciveUserInfo; 	for(var i in list){ 	   let tempAge = list[i].age + 1; 	   list[i].age = tempAge; 	   that.mesgShow = list; } 

此时的结果为:age+1

uni-app开发经验分享九: 组件传值

 附加:改变的代码:

uni-app开发经验分享九: 组件传值

二、子组件向父组件传值

与微信小程序自定义组件中子组件向父组件传值一样的逻辑,都是通过事件,下面直接上代码:

父组件index.vue

<template> 	<view class="content"> 		<son-show @send="getSonValue"></son-show> 	</view> </template>   <script> 	import sonShow from '../../component/son.vue'; 	export default { 		components: { 			sonShow 		}, 		methods:{ 			getSonValue: function(res){ 				console.log("res=========",res) 			} 		} 	} </script> 

子组件;

<template> 	<view class="" @click="sendMegToIndex"> 		点我向父组件传值 	</view> </template>   <script> 	export default{ 		methods:{ 			sendMegToIndex: function(){ 				// 向父组件传值 				this.$emit("send","我来自子组件") 			} 		} 	} 	 </script>     

最终结果:

uni-app开发经验分享九: 组件传值

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » uni-app开发经验分享九: 组件传值
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏