19.uniapp组件通信 兄弟组件传值

一.首先有首页：index.vue

<template>
	<view class="content">
		<testA></testA>
		<testB></testB>
	</view>
</template>

<script>
	// ab组件
	import testA from '../../components/test/test-a.vue'
	import testB from '../../components/test/test-b.vue'
	
	export default {
		components:{
			testA,
			testB,
		},
</script>

<style>
</style>

二.test-a组件

<template>
	<view>
		<!-- 具体查看	框架页面页面通信 -->
		这是a组件 ：<button @click="addNum">修改b组件的数据{
   
   {num}}</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				num:0,
			}
		},
		methods:{
			addNum(){
				uni.$emit('updateNum',10)
			}
		}
	}
</script>

<style>
</style>

三.test-b组件

<template>
	<view>
		这是b组建的数据{
   
   {num}}
	</view>
</template>

<script>
	export default{
		data(){
			return{
				num:0
			}
		},
		created() {		//	uni.$on(eventName,callback)		监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
			uni.$on('updateNum',num => {		// num 传过来的		//	updateNum 自定义事件名字
				this.num += num					// 加多少就等于多少
			})
		}
	}
</script>

<style>
</style>