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

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

---

引入自定义顶部组件效果：
PS：父组件向子组件传参使用的是props，后面可以看到打印出来的传参。

---

子组件向父组件传参效果：
PS：子组件向父组件使用的uni.$emit

---

目录结构：

---

在pages.json关闭原生顶部：

---

父组件-index.vue

<template>
	<view class="content">
		<!-- 以标签的方式载入，objdata是传参对象 -->
		<myheader :objdata="objdata"></myheader>
		
		<!-- onval用来记录子组件传参 -->
		<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>