uniapp，组件间传值

最新推荐文章于 2025-03-28 22:08:27 发布

原创最新推荐文章于 2025-03-28 22:08:27 发布 · 3.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了uniApp中组件间的通信方法，包括父组件向子组件传值，子组件向父组件反馈数据，以及兄弟组件间的数据传递。通过props、$emit及事件监听实现高效的数据流动。

父组件向子组件传值
在父组件添加要传数据，子组件通过props接收数据

父组件代码：

<template>
	<view>
		<test :number="number"></test>
	</view>
</template>

<script>
	import test from '@/components/test.vue'
	export default {
		data() {
			return {
				number:3
			}
		},
		onLoad(options) {
		},
		components:{
			test
		},
		methods: {
		}
	}
</script>

<style>

</style>

子组件代码

<template>
	<view>
		<view class="">父组件传过来的值{{number}}</view>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
			};
		},
		props:['number'],
	}
</script>

<style>

</style>

效果如图：
在这里插入图片描述

子组件向父组件传递数据
在子组件注册事件，this.$emit()的方式将值传递给父组件，父组件里面的子组件通过@func绑定一个函数来处理

子组件代码

<template>
	<view>
		<button type="primary" @click="sendMsg">向父组件传递参数</button>
	</view>
</template>

<script>
	export default {
		name:"test",
		data() {
			return {
				msg:'我是子组件msg'
			};
		},
		
		methods:{
			sendMsg(){
				//func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
				this.$emit('func',this.msg)
			}
		}
	}
</script>

<style>

</style>

父组件代码

<template>
	<view>
		<test @func="getMsgFormSon"></test>
		<view >{{msg}}</view>
	</view>
</template>

<script>
	import test from '@/components/test.vue'
	export default {
		data() {
			return {
				msg:'数据'
			}
		},
		components:{
			test
		},
		methods: {
			getMsgFormSon(data){
				this.msg = data;
				console.log(this.msg)
			}
		}
	}
</script>

<style>

</style>

效果如图
在这里插入图片描述

兄弟组件传递数据

页面代码

<template>
	<view>
		<testa></testa>
		<testb></testb>
	</view>
</template>

<script>
	import testa from '@/components/testa.vue'
	import testb from '@/components/testb.vue'
	export default {
		data() {
			return {
			}
		},
		components:{
			testa,
			testb
		}
	}
</script>

<style>

</style>

a组件代码

<template>
	<view>
		这是a组件<button type="default" @click="changeB">触发b组件全局事件，修改b组件的值</button>
	</view>
</template>

<script>
	export default {
		name:"testa",
		data() {
			return {
				
			};
		},
		methods:{
			changeB(){
				//使用uni.$emit触发全局事件，并传参
				uni.$emit("upData",10)
			}
		}
	}
</script>

<style>

</style>

b组件代码

<template>
	<view>
		这是b组件数据：{{num}}
	</view>
</template>

<script>
	export default {
		name:"testb",
		data() {
			return {
				num:0
			};
		},
		//全局事件在组件实例创建完成定义
		created() {
			uni.$on('upData',num=>{
				this.num = num;
			})
		}
	}
</script>

<style>

</style>