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

子组件

<template>
	<div>
		子组件
		<button @click="sendMsg">传递</button>
	</div>
</template>
<script>
	
export default{
	name:"child",
	data(){
		return{
			msg:'我是子组件数据'
		}
	},
	props:{
		num:{
			type:Number,
			default:5
		}
	},
	computed:{
		addNum(){
			return this.num * 5;
		}
	},
	methods:{
		sendMsg(event){
			//两个参数：参数1：key  参数2：数据
			this.$emit("sendmsg",msg)
			//如果想从父组件获取再计算处理后返回父组件用以下方式
			this.$emit("sendmsg",this.addNum)
		}
	}
}	

</script>

在子组件中添加methods方法
this.$emit(“sendmsg”,msg)
两个参数：参数1：key 参数2：数据

在父组件中则是
<Child @sendmsg=“getMsg” "/>
之后再methods里将得到的值传递给当前组件

父组件

<template>
	<div>
		父组件
		<input type="text" v-model="num">
		<Child @sendmsg="getMsg" :num="getNum"/>
		{{ info }}
	</div>
</template>
<script>

import Child from "./child"
	
export default{
	name:"parent",
	data(){
		return{
			info:"",
			num:5
		}
	},
	computed:{
		getNum(){
			return this.num - 0;
		}
	},
	components:{
		Child
	},
	methods:{
		getMsg(data){
			this.info = data;
		}
	}
}	

</script>