父子组件的传值

---

前言

vue中的父子组件传值，值得注意的是要遵守单向数据流原则。
单向数据流原则，就是父组件的数据可以传递给子组件，子组件也可以获取并使用父组件传过来的数据。但是子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来修改数据。

---

一、父组件传值给子组件

//在父组件中的子标签中写自定义属性
<child :type="type1"></child>

//在子组件中用props接受父组件的自定义属性。
props:{
	type:{
		type:[Array],
		default: () => {
			return 'free'
		}
	}
},

二、子组件传值给父组件

子组件传值给父组件的方法：
1.在父组件中给引用的子组件注册一个事件(这个事件的名字是自定义的)
2.子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据：
1.$emit方法第二个参数可以定义子组件给父组件传递的内容
2.在父组件中怎么拿到这内容
	2.1父组件这个方法没有自定义参数,在父组件的方法直接加这个参数就可以拿到
	2.2父组件有自定义参数,可以传入$event也可以拿到子组件传递的数据.通过$event只能传递第一个参数.

1.没有自定义参数时

//在父组件中给子组件中注册一个事件（名字自定义）
<child @tofather="tofather"></child>

//接受来自子组件的传值
tofather(data){
	console.log(data);
}

//子组件使用$emit传值
created(){
	this.$emit('tofather',{name:'zs',age:19})
}

2.有自定义参数时

<child @tofather="tofather('自定参数','传递的参数')"></child>	

//子组件使用$emit传值
tofather(data，data1) {
	console.log(data);
	console.log(data1);
}

---

总结

以上就是今天要讲的内容。