uni-app中组件传值

曾经终败给现在 2021-11-23 02:40 238阅读 0赞

**一、父组件向子组件传值**

通过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、结果**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70][]

**四、说明**

对于一些详情页，比如有时我们需要点赞数量+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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70 1][]

附加：改变的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70 2][]

**二、子组件向父组件传值**

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

父组件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>

最终结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70]: /images/20211122/34558199cf30405eb13f23dadc81a264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70 1]: /images/20211122/02df48b53ed04efa98b5ef6d67fb0b09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70 2]: /images/20211122/dd68f31aff9646d0819c210b7bdcd0c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N5bGVhcG4_size_16_color_FFFFFF_t_70 3]: /images/20211122/c2e13fb8049a4062829a68d8a8630fc7.png