uniapp自定义组件-组件传参-父组件向子组件传参-子组件向父组件传参详细示例

向右看齐 2021-07-24 21:05 592阅读 0赞

## 前言：本篇文章主要讲的是自定义组件的使用与传参。在不同的页面重复使用到相同或者类似的模块，这里就可以使用到组件就省略了不少代码，不用每个页面去写相同的代码，直接去引用该组件就可以了，下面以自定义顶部为示例。 ##

--------------------

**引入自定义顶部组件效果：**  
PS：父组件向子组件传参使用的是props，后面可以看到打印出来的传参。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]

--------------------

**子组件向父组件传参效果：**  
PS：子组件向父组件使用的uni.$emit  
![在这里插入图片描述][20200408103310420.gif]

--------------------

**目录结构：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]

--------------------

**在pages.json关闭原生顶部：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]

--------------------

**父组件-index.vue**

<template>
    	<view class="content">
    		
    		<myheader :objdata="objdata"></myheader>
    		
    		
    		<view style="padding: 20rpx 0;">子组件传过来的值{ { onval}}</view>
    	</view>
    </template>
    
    <script>
    	// 引入自定义组件
    	import myheader from "../../components/myheader.vue"
    	export default { 
    		// 组件注册
    		components:{ 
    			myheader
    		},
    		data() { 
    			return { 
    				objdata:{ 
    					type:0
    				},
    				onval:0
    			}
    		},
    		onUnload() { 
    			uni.$off('thatComponents')
    		},
    		onLoad() { 
    			uni.$on('thatComponents',(data)=>{ 
    				console.log(data);
    				this.onval+=data;
    			})
    		}
    	}
    </script>
    
    <style>
    </style>

--------------------

**子组件-myheader.vue**

<template>
    	<view>
    		<view style="width: 100%;text-align: center;background-color: #FD5C5C;color: white;font-size: 16px;height: 55px;line-height: 55px;">
    			首页
    		</view>
    		
    		<button type="default" @click="thatComponents">子组件传参给父组件</button>
    	</view>
    </template>
    
    <script>
    	export default{ 
    		props:['objdata'],
    		data(){ 
    			return{ 
    				types:''
    			}
    		},
    		created:function(){ 
    			this.types=this.objdata.type;
    			console.log(this.objdata)//打印父组件传过来的参数
    			console.log(this.types)
    		},
    		methods:{ 
    			thatComponents(){ 
    				uni.$emit('thatComponents',1)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70]: /images/20210724/39959ffa4ff2409589c10df46b8dbcd4.png
[20200408103310420.gif]: /images/20210724/edfef2cbc11c49738fb679333d8d1e28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 1]: /images/20210724/820e9033798c4265bc9322a2c9d4320c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjI3Mjkx_size_16_color_FFFFFF_t_70 2]: /images/20210724/e09ecb91b7894d99807e8c7be7f7cb21.png