vue框架---父子组件传值

父子组件传值

父----->子

父：
<template>	
  <div id="app">		
	 父组件：<input type="text" v-model="name"/><br />		 
	 父组件：<input type="text" v-model="age"/><br />		
	 子组件：<test :fathername="name" :fatherage="age"></test>	 		
  </div>
</template>


 <script>	
 import test from "./components/test1.vue"	
 export default 
  {		
    data() {			
	 return {				
		 name:'',				
		 age:''			
	 }		
 },		
components: {test},		
}
 </script> 


 子：
 <template>	
	 <div>		
		 我的名字是{{fathername}}<br />		{
		 {fathername}}的年龄是{{fatherage}}	
	 </div>
 </template>
 
 <script>	
 export default {		
	 props:['fathername','fatherage'],		
 	 data(){			
	 return{}		
 	}	
 }
 </script>

子----->父

<template>	
	<div>		
		<!--子组件的数据：{{childerName}}的年龄是{{childerAge}}-->		
		<input type="text" v-model="childerName"/>		
		<input type="text" v-model="childerAge"/>		
		<input type="button" value="点击传值" @click="chickChild" />	
	</div>
</template>

<script>	
export default {		
	data() {			
		return {				
			childerName: '',				
			childerAge:''			
			}		
},		
methods: {			
	chickChild() {				
		// childeVlaue是在父组件on监听的方法				
		// 第二个参数this.children是需要传的值				
		this.$emit("childeVlaue", this.childerName, this.childerAge)			
		}		
	}	
}
</script>


父：
<template>	
	<div id="app">		
		姓名：{{name}}<br />		
		年龄：{{age}}		
		<test v-on:childeVlaue="childeVlaue"></test>	
	</div>
</template>
<script>	
import test from "./components/test1.vue"	
export default {		
	data() {			
		return {				
			name:'',				
			age:''			
			}		
		},				
	methods:{			
		childeVlaue:function(childerName,childerAge){											this.name=childerName;				
				this.age=childerAge;			
				}		
			},		 
	components: {test}
}