Vue的数据共享 父向子 | 子向父 | 兄弟传值

组件之间的数据共享

组件之间的关系

1. 父子关系
2. 兄弟关系

父子组件之间的数据共享

1. 父→子
2. 子→父

父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。
eg.

//父组件
<Son :msg="message" :user="userinfo"></Son>
data(){
	return {
		message:'hello vue.js',
		userinfo:{name:'zs',age:20}
	}
}

//子组件
<template>
	<div>
		<h5>Son 组件</h5>
		<p>父组件传递过来的msg值是：{{msg}}<p>
		<p>父组件传递过来的user值是：{{user}}<p>
	</div>
</template>
props:['msg','user']

父组件提供数据，子组件通过props接收

值类型是复制一份传过去
引用类型只是复制引用
不要直接修改props的值

子组件向父组件共享数据

子组件向父组件共享数据要使用自定义事件。

//子组件
export default{
	data(){
		return {count:0}
	},
	methods:{
		add(){
			this.count+=1
			//修改数据时，通过$emit()触发自定义事件
			this.$emit('numchange',this.count)
		}
	}
	
}

//父组件
<Son @numchange="getNewCount"></Son>
export default{
	data(){
		return {countFromSon:0}
	}.
	methods:{
		getNewCount(val){this.countFromSon=val}
	}
}

兄弟组件之间的数据共享

在Vue2.x中，兄弟组件之间数据共享的方案是EventBus

EventBus的使用步骤

1. 创建eventBus.js模块，并向外共享一个Vue的实例对象
2. 在数据发送方，调用bus.$emit(‘事件名称’,要发送的数据)方法触发自定义事件
3. 在数据接收方，调用bus.$on(‘事件名称’,事件的处理函数)方法注册一个自定义事件