uni-app 中兄弟组件传值

最新推荐文章于 2023-07-06 15:00:38 发布

Adasunshine

最新推荐文章于 2023-07-06 15:00:38 发布

阅读量1.6k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/FormAda/article/details/115461053

版权

该博客介绍了如何在Vue中使用uni-app的uni.$on和uni.$emit方法实现在aaa.vue和bbb.vue组件之间的通信。aaa.vue组件监听全局事件'updateNum'并更新数据，bbb.vue组件则通过触发该事件来修改aaa.vue中的数值。

摘要由CSDN通过智能技术生成

两个兄弟组件分别为aaa.vue和bbb.vue，父组件为index.vue。

aaa.vue：

用uni.$on注册全局事件。

<template>
	<view>
		<button>我是a,点击b修改数据{{num}}</button>
	</view>
</template>

<script>
	export default {
		name:"aaa",
		data() {
			return {
				num: 0
			};
		},
		created(){
				uni.$on('updateNum',num =>{
					this.num += num
				})
		}
	}
</script>

<style>

</style>

bbb.vue：

用uni.$emit触发全局事件。

<template>
	<view>
		<button @click="getNum">我是b组件，修改a中的数据</button>
	</view>
</template>

<script>
	export default {
		name:"bbb",
		data() {
			return {
				
			};
		},
		methods:{
			getNum(){
				uni.$emit('updateNum',10)
			}
		}
	}
</script>

<style>

</style>

index.vue:

<template>
	<view class="container">
		<aaa></aaa>
		<bbb></bbb> 	
	</view>
</template>

<script>
import aaa from "../../components/aaa.vue"
import bbb from "../../components/bbb.vue"
	export default {
		data() {
			return {
				
			}
		},
		components:{
			aaa,
			bbb 
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>