vue,uni-app组件间的通讯(父子，兄弟组件间传值)

父组件给子组件传值

父组件通过v-bind绑定数据传递给子组件：

<template>
	<view>
		<son :msg="msg"></son>
	</view>
</template>

<script>
	import son from "@/components/son/son.vue"
	export default {
		data () {
			return {
				msg: 'hello,i am your father!'
			}
		},
		components: {son}
	}
</script>

子组件通过props来接受外界传递到组件内部的值：

<template>
	<view>
		{{msg}}
	</view>
</template>

<script>
	export default {
		props: ['msg']
	}
</script>

子组件给父组件传值

通过点击事件触发 sendMsg 方法，在方法中利用 $emit 触发 myEvent 将 this.status 传递给父组件

<template>
	<view>
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '想要传递给父组件的数据'
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)
			}
		}
	}
</script>

父组件定义自定义事件( myEvent )并接收参数

<template>
	<view>
		<son @myEvent="getMsg"></son>
		子组件传递的值： {{res}}
	</view>
</template>
<script>
	import son from "@/components/son/son.vue"
	export default {
		data () {
			return {
				res: '' 
			}
		},
		methods: {
			getMsg (res) {
				this.res = res
			}
		},		
		components: {son}
	}
</script>

兄弟组件间传值

兄弟A组件：
通过点击事件触发 addNum 方法，触发uni.$emit 定义的 updateNum 全局事件，将数据传递出去

<template>
	<view>
		这是a组件：<button @click="addNum">修改b组件的数据</button>
	</view>
</template>

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

兄弟B组件：
在组件生命周期函数 created() ，用 uni.$on 注册一个全局事件 updateNum 触发回调函数，将A组件传递的值渲染在页面上

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

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

父组件：

	import testA from '../../components/a.vue'
	import testB from '../../components/b.vue'