uniapp父子组件传值

灰太狼 2021-09-13 15:54 603阅读 0赞

## 父组件页面（parent.vue） ##

<template>
    	<view>
    		<Child @out=out :backGround=backGround></Child>
    	</view>
    </template>
    <script>
    	import Child from "../../components/child.vue";
    	export default{ 
    		components:{ 
    			Child
    		},
    		data() { 
    			return { 
    				backGround:"red"
    			}
    		},
    		methods: { 
    			out(e){ 
    				console.log("接收到的值==>>"+e) //接收方法
    			}
    		}
    	}
    </script>
    <style>
    </style>

## 子组件页面（child.vue） ##

<template>
    	<view class="content" :style="[{background:backGround}]">
    		<button @tap="miss">点击传值</button> //子组件点击事件
    	</view>
    </template>
     
    <script>
    	export default { 
    		props:{ 
    			backGround:{  //参数名
    				type:String, //参数名
    				default:"#fff" //参数默认
    			}
    		},
    		methods:{ 
    			miss(){ 
    				this.$emit("out","hahaha") //子传父
    			}
    		}
    	}
    </script>
     
    <style>
    	.content{ 
    		width: 400upx;
    		height: 400upx;
    	}
    </style>

## 在父组件中引入子组件 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]

## 父传子（props） ##

在子类props里定义接收参数  
![在这里插入图片描述][20200312131235614.png]  
在子类标签写上引用  
![在这里插入图片描述][2020031213205881.png]  
然后在父类写上准备传递的参数  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]  
此时，父组件传到子组件的值，就会覆盖默认背景色  
![在这里插入图片描述][20200312125436281.png]

## 子传父（$emit） ##

需要首先在子类组件定义事件  
![在这里插入图片描述][20200312132636434.png]  
在子类写上触发事件  
![在这里插入图片描述][20200312132716520.png]  
在父类引用标签上写上在子类$emit里面定义的方法名,以及接收方法

![在这里插入图片描述][20200312132757417.png]  
![在这里插入图片描述][20200312132848864.png]  
然后点击子类触发,就可以传值给父类  
![在这里插入图片描述][20200312133600715.png]

**注意：**

1.父传子用props；子传父用$emit()

2.子组件中的miss方法中this.$emit(‘out’,“hahaha”); //向父组件提交一个事件和值

其中，$emit中的’out’是父组件的方法名，hahaha是要传的值。

这个方法在父组件中以@out="out"关联给父组件的out方法，然后这个父组件的out方法就可以接收子组件传来的hahahaa（实现了子组件修改父组件的目的）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/2a3236af81c04240a706e78fe3856c24.png
[20200312131235614.png]: /images/20210913/e2023241863d48c0b2f220b7b699f58a.png
[2020031213205881.png]: /images/20210913/ac64688820a749ecbfae08424d4df32a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/ef2811d8d1f64cbbb6d957be42d90922.png
[20200312125436281.png]: /images/20210913/b78169585abb4cf9b74ae7b82d56a77e.png
[20200312132636434.png]: /images/20210913/53a2b11254b84cd0acc76a670c177232.png
[20200312132716520.png]: /images/20210913/776d8c6d69c84a05abadeac44edeee25.png
[20200312132757417.png]: /images/20210913/1126444c00494633af427cea09a2cb82.png
[20200312132848864.png]: /images/20210913/28c00f2fb9d54c56bf0d4236871d1968.png
[20200312133600715.png]: /images/20210913/15d2a9ed47894489b7ee73e9ebf9a812.png