父子组件通信学习经验记录

1、子传父：
如果要想将子组件的数据和方法传递给父组件：
方法1：一般是在触发子组件事件时，使用this.$emit()方法，触发父组件绑定在子组件使用标签身上的自定义事件，多级传递时，父组件和爷爷组件的自定义事件最好不要写一样的，在爷爷组件中可以用_自定义事件名来区别父亲和爷爷组件的自定义事件

子组件
click(){
	this.$emit('update',数据)
}

父组件
<son @update="update"/>
methods:{
	update(val){
		this.$emit('_update',val)
	}
}

爷爷组件
<father @_update="_update"/>
methods:{
	_update(val){
		//val是子组件传递的数据
	}
}

方法2：但是如果没有事件需要触发，要想传值，可以在子组件中定义方法，将数据return出去，然后在父组件中通过ref引用调用子组件的方法，取得子组件的数据，如果要多级传递，就将函数的调用再放到父组件的方法中，在爷爷组件中通过父组件的ref引用调用父组件的函数，进而调用子组件的函数。传递子组件的方法，方式也是一样的

子组件：
name:'Son',
data(){
	return {msg:'1'}
},
methods:{
 //将子组件的数据放在一个方法中
	getMsg(){
		return this.msg
	},
	method1(){
		//子组件的方法
	}
}

父组件：
< son ref="Son"/>
// 在父组件中调用子组件的dom中的方法，拿到子组件的数据
// this.$refs.子组件使用标签身上的ref值.子组件的方法()
import Son form '子组件所在路径'
export default {
	name:'Father',
	components:{'Son'},
	data(){
	return {}
	},
	methods:{
		getMsg(){
			this.$refs.Son.getMsg()
		},
		method2(){
			this.$refs.Son.method1()
		}
	}
}

爷爷组件
< Father  ref="Father"/>
import Father form '子组件所在路径'
export default {
	name:'grandFather',
	components:{'Father'},
	data(){
		return {}
	},
	methods:{
		getMsg(){
			this.$refs.Father.getMsg()
		},
		method3(){
			this.$refs.Father.method2()
		}
	}
}

这样就将子组件数据一级一级传递给了他爷爷，
取得子组件的方法也是类似的方式，在父组件中调用子组件的方法，在爷爷组件中调用父组件的方法，这样就一次调用了爷爷组件的方法，然后是父组件的方法，最后是子组件的方法。

2、父传子：
将父组件的数据和方法传递给子组件，将数据动态绑定在子组件的使用标签身上，在子组件中通过props属性接收父组件的数据和方法

父组件
<son :data="data" :getData="getData"/>

子组件
export default {
	name:'Son',
	//props:['data'] 注意接收的数据用引号括起来
	props:{
		data:{
			type:String,
			default:''
		},
		getData:{
			type:Function,
			default:function(){}
		},
		...
	}
}