快速理解Vue父子組件傳值

組件化開發是目前前端開發必備的開發技能，組件化開發可以大大提高開發效率

今天整理一下Vue的父子組件傳值方式，方便還沒有理解的朋友學習。

1、父組件向子組件傳值

<!-- 父組件 -->
<!-- 父組件調用子組件，看成是調用子組件函數，給子組件傳值，就是給函數傳參數 -->
<template>
	<div>
		<!-- 傳遞動態值前面加個冒號: -->
		<!-- 傳遞靜態值就不需要冒號 -->
		<childComponent
			:msg="msg1"
		/>
	</div>
</template>
<script>
import childComponent from "./child.vue";//引入組件
export default{
	components:{
		childComponent//註冊組件
	},
	data(){
		return{
			msg1:"你好"
		}
	}
}
</script>

<!-- 子組件 -->
<!-- 把子組件看成一個函數，props裏面就是子組件接受的參數 -->
<template>
	<div>
		{{msg}}
	</div>
</template>
<script>
export default{
	props:{
		msg:{
			type:String,
			default:"1"
		}
	}
}
</script>

2、子組件向父組件傳值

<!-- 父組件 -->
<!-- 子組件向父組件傳值就不一樣了，需要用到$emit和$on -->
<!-- 父組件監聽函數使用@後面接上函數名 -->
<template>
	<div>
		<!-- 傳遞動態值前面加個冒號: -->
		<childComponent
			@eventName="handleEvent"
		/>
	</div>
</template>
<script>
import childComponent from "./child.vue";//引入組件
export default{
	components:{
		childComponent//註冊組件
	},
	methods:{
		handleEvent(data){//監聽子組件觸發的函數，data爲子組件給父組件傳的值
			console.log(data);
		}
	}
}
</script>

<!-- 子組件 -->
<!-- 把子組件看成一個函數，props裏面就是子組件接受的參數 -->
<template>
	<div>
		<button @click="triggerEvent">給父組件傳值</button>
	</div>
</template>
<script>
export default{
	data(){
		msg:"給父組件的信息"
	},
	methods:{
		triggerEvent(){
			this.$emit("eventName",this.msg);//第一個參數是觸發的事件名稱，對應着父組件@監聽的名字，第二個參數是傳給父組件的額外參數，傳遞多個參數可以直接傳對象過去。
		}
	}
}
</script>

大致講解如上，個人理解都在備註裏面了，如果有沒有講清楚的或者其他不懂的請留言，我會回覆各位並更新博客的，以便後面讀者閱讀！