学习笔记 （7）父子组件之间传值

组件的通讯

父组件给子组件传值

子组件通过props来接受外界传递到组件内部的值
props: ['msg']

<template>
	<view>
		这是一个自定义组件 {{msg}}
	</view>
</template>

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

<style>
</style>

其他组件在使用子组件的时候传递值

1.引入 import test from "@/components/test/test.vue"
2.注册 components: {test}
3.使用 <test :msg="msg"></test>

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

<script>
	import test from "@/components/test/test.vue"
	export default {
		data () {
			return {
				msg: 'hello'
			}
		},
		
		components: {test}
	}
</script>

子组件给父组件传值

子组件通过sendMsg()方法，$emit触发事件触发myEvent()方法传递参数
父组件<test :msg=“msg” @myEvent=“getMsg”> ，父组件执行getMsg(),获取参数。

<template>
	<view>
		这是一个自定义组件 {{msg}}
		<button type="primary" @click="sendMsg">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				status: '打篮球'
			}
		},
		props: {
			msg: {
				type: String,
				value: ''
			}
		},
		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>

子组件向父组件传值是文本框时候，不用@Click 应更换为 @input

兄弟组件通信

1.uni.$emit(eventName,OBJECT)
触发全局的自定事件。附加参数都会传给监听器回调。c
代码示例:
uni.$emit('update',{msg:'页面更新'})

2.uni.$on(eventName,callback)

监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。

代码示例

uni.$on('update',function(data) {
        console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
    })

组件A

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

<script>
	export default {
		data () {
			return {
				num : 0
			};
	},
	
	created() {
		//监听全局自定义事件udpdateNum，由$emit触发
		uni.$on('upadteNum',num =>{
			this.num+= num;
		})
		
	}
	
	}
	
</script>

<style>
	
</style>

组件B

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

<script>
	export default {
		data () {
			return {
				
			};
	},
	
	methods:{
		addNum (){
		//触发全局事件
			uni.$emit('updateNum',10)
		}
	}
	
	}
	
</script>

<style>
	
</style>

在页面中引入组件a，组件b，并使用，效果图如下：