Vue父子组件传值

一、父传子

1、原理

父组件传值子组件，就是在子组件中设置props属性接受父组件传来的值。
props与data和methods平级，下面是props的写法：

props: {
	toson: [String, Number],
},

2、步骤

第一步：在父组件的子组件中自定义一个属性

<template id="father">
	<div>
		<son toson="toSon"></son>
	</div>
</template>

toson属性是我们自定义的属性，toson属性值是要父传子传递的参数
第二步：在字标签中在props内用空的字接受

props: {
	toson: [String, Number],
},

[String, Number]是传参的类型（字符串类型和数字类型）
如此，这个自定义属性就可以在子组件中使用了，使用方法跟data中相同，用this.toson

二、子传父

1、原理

在父组件的子标签中设置自定义函数，在子组件中书写触发事件即可

2、步骤

在父组件的字标签中书写自定义函数

<template id="father">
	<div>
		<son @tofather="tofather($event,2)"></son>
	</div>
</template>

$event为事件函数
父组件自定义事件中有一个参数data，用来接收子组件的传值

methods: {
	tofather(data, data2) {
		console.log(data)
		console.log(data2)
    },
},

参数的名字可以自己命名
在子组件中写触发事件

toFather() {
	this.$emit('tofather', '啦啦啦啦啦', '哈哈哈哈哈')
},

$emit（‘事件名字’，‘传的值’）