uniapp 组件的通讯及传参

父组件给子组件传值

父组件在使用test子组件的时候传递值

<template>
	<view>
		<test v-if="flag" :title="title"></test>
		<test :msg="msg" @myEvent="getMsg"></test>  // 第二步  加：
	</view>
</template>

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				flag: true,
				title: "title",
				msg: 'msg'                          // 第一步 写data
			}
		},
		
		components: {test}
	}
</script>

子组件通过props来接受外界传递到组件内部的值 (uni的prop是数组，vue的是对象)

<template>
	<view>
	这是传过来的数据{{title}}
	<button type="primary">给父组件传值</button>  
	{{msg}}                                            //第二步   插值展示
	</view>
</template>

<script>
	export default {
		props: {                                       //第一步  props接收
					msg: {
						type: String,
						value: ''
					},
					title: {
						type: String,
						value: ''
					},
				},           
	}
</script>

<style>
</style>

子组件给父组件传值

子组件通过$emit触发事件进行传递参数

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

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		methods: {
			sendMsg () {
				this.$emit('myEvent',this.status)       //第二步
			}
		}
	}
</script>

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

<template>
	<view>
		<test :msg="msg" @myEvent="getMsg"></test>   //第一步
	</view>
</template>
<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		methods: {
			getMsg (res) {                          //第二步
				console.log(res)
			}
		},
		
		components: {test}
	}
</script>

兄弟组件传值  （消息的订阅与发布）

a.vue（发布）

       uni.$emit

<template>
	<view>
		<button @click="addnum">修改b组建数据</button>
		</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			addnum(){
				uni.$emit('updataNum',10)   //发布
			}
		}
	}
</script>

b.vue(订阅)

     uni.$on

<template>
	<view>{{num}}</view>
</template>

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