这里使用的是 uni.$on uni.$emit

个人理解 类似于vue中的全局事件总线

test 组件

<template>
	<view class="myTest">
		<view>标题:test组件</view>	
		<button type="primary" size="mini" @click="addNum()">修改 组件2 的数据</button>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				num:3
			}
		},
		
		methods:{
			// 触发自定义事件
			addNum(){
				uni.$emit("updateNum",10)
			}
		}
	}
</script>

<style>
	.myTest{
		margin-top: 30rpx;
		border:5rpx solid #000000;
		padding: 10rpx;
	}
</style>

test2 组件

<template>
	<view class="myTest2">
		组件2
		<view>这是2 组件的数据 {{num}}</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				num:0
			}
		},
		// 组件被初始化创建之后
		created() {
			// 自定义事件回调
			uni.$on("updateNum",(num)=>{
				this.num = this.num + num
			})
		}
	}
</script>

<style>
	.myTest2{
		margin-top: 30rpx;
		border: 5rpx solid #007AFF;
		padding: 10rpx;
	}
</style>

结果  :

Logo

前往低代码交流专区

更多推荐