vue组件之间相互传值的方式

父组件向子组件传值

//子组件代码
<template>
	<label>{{ msg }}</label>
</template>

<script>
export default{
	name:"child1",
	props:{
		msg:String//用来接收父组件的值
	}
}
</script>

//父组件代码
<template>
	<child1 v-bind:msg="parentMsg"/>//这里的msg要和子组件中定义的属性名一致
</template>

<script>
import child1 from './child1'
export default{
	name:"parent",
	data():{
		return{
			parentMsg:"父组件传值"
		}
	}
	components:{
		child1
	}
}
</script>

最后总结一下要点：

1. 子组件在props中创建一个属性，用以接收父组件传过来的值
2. 在父组件中注册子组件
3. 在子组件标签中添加子组件props中创建的属性（属性名要一致）
4. 给msg赋值

子组件向父组件传值

//子组件代码
<template>
	<button v-on:click="btnClickToParent">向父组件传值</button>
</template>

<script>
export default{
	name:"child1",
	methods:{
		btnClickToParent(){
			this.$emit("btnClickEvent","点击了按钮");
		}
	}
}
</script>

//父组件代码
<template>
	<child1 v-on:btnClickEvent="getChildMsg"/>//这里的msg要和子组件中定义的属性名一致
</template>

<script>
import child1 from './child1'
export default{
	name:"parent",
	data():{
		return{
			null
		}
	}
	components:{
		child1
	},
	methods:{
		getChildMsg(data){
			alert(data);
		}
	}
}
</script>

最后总结一下要点：

1. 子组件中需要以某种方式来触发，例如点击事件来触发一个自定义事件
2. 将需要传的值作为emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3. 在父组件中注册子组件，并在子组件标签上绑定对自定义事件的监听（emit的第一个参数值，要和父组件中v-on:后面的方法名一致）

子组件向子组件传值

第三种其实就是运用上面的两种方法，先使用子组件1传父组件，然后再将拿到的值给子组件2.

根据上面总结出一句话：父传子用属性，子传父用事件；