vue 父子组件传值

父子组件传值

父组件传值给子组件

主要通过props

// 1、创建一个子组件
<template>
	<div>子组件</div>
</template>

// 2、创建一个父组件
<template>
	<div>父组件</div>
</template>
<script>
	export default {
		data(){
			return{
				msg:'我是要传给子组件的data数据',
			}
		}
	}
</script>

// 3、将父组件中的msg参数用v-bind绑定，传给子组件(son是自定义的属性)
//父组件
   <child :son="msg">子组件</child>

//子组件
props:["son"],//用过props 来接收父组件传来的参数

console.log(this.son)//可获得父组件中的msg

注意：props接收的参数只读，不能进行修改。

子组件给父组件传值

主要通过this.$emit(‘函数’,要传的参数)

//子组件
this.$emit('getchildp',1)

//父组件
<child @getchildp="getmsg"></child>

getmsg(e){
	console.log(e) //1 
}