vue父子组件通信

vue父子组件通信

子组件:

	<template>
		<div>子组件<button @click="sendMsg">传递</button></div>
	</template>
	
	<script>
		export default{
			name:"child",
			data(){return{msg:'我是子组件数据'}},
			props:{ 
				num:{    //接收父组件传递过来的参数num
					type:Number,
					default:5
				}
			},
			computed:{ 
				addNum(){
					return this.num * 5; 
				}
			},
			methods:{ 
				sendMsg(event){
					//两个参数：参数1：key  参数2：数据
					this.$emit("sendmsg",this.addNum) }
				}
			} 
	</script>

父组件:

	<template>
		<div>父组件<input type="text" v-model="num">
			<Child @sendmsg="getMsg" :num="getNum"/>
			{{ info }}
			<!-- @sendmsg是接收子组件参数,:num是给子组件传参 -->
		</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>