父子组件间的传递值之父传子

父组件

<template>
	<div>
		父亲
		<input type="text" v-model="lifemsg">
		<Son :title="msg" :lifemsg="lifemsg" :num="num" :objdata="myobj"/>	/*说明1*/	
		<button @click="changeMsg">按钮</button>          /*说明2*/	
	</div>
</template>
<script>

import Son from "./son"
	
export default{
	name:"mc",
	data(){
		return{
			msg:"我是活的数据",
			lifemsg:"hello",
			num:10,
			myobj:{
				name:"iwen",
				age:20
			}
		}
	},
	components:{
		Son
	},
	methods:{
		changeMsg(event){
			this.msg = "我是修改之后的数据";
		}
	}
}	

</script>
<style scoped>

</style>

说明1：//Son :title=“msg” :lifemsg=“lifemsg” :num=“num” :objdata=“myobj”//
将需要传输的数据直接在加入子组件的地方写入，以下为格式 ：
子组件接受的变量名：父组件传输的变量名
子组件文件中只需在script 用props接受即可（props与data同级）
子组件Son中 : title = “msg” ，msg为父组件的数据，title则是传入到子组件的变量名字。当然我们子组件会对传入的值进行交检(如果不需要则直接在子组件写
props：[‘title’，‘lifemsg’,‘num’]),在下面组件中type为类型，required表示必须的的类型，default为默认值，如果是对象，则还必须是function()的形式return
子组件 名字为“son.vue”

<template>
	<div>
		儿子:{{ title }}-{{ lifemsg }}-{{ num * 2 }} -{{ objdata.name }}
	</div>
</template>
<script>
	
export default{
	name:"son",
	data(){
		return{

		}
	},
	props:{
		title:[String,Number],
		lifemsg:{
			type:String,
			required:true
		},
		num:{
			type:Number,
			default:5
		},
		objdata:{
			type:Object,
			default:function(){
				return {
					name:"未知",
					age:10
				}
			}
		}
	}
}	

</script>
<style scoped>
	
img{
	width: 300px;
}

</style>