父子組件通信在vue項目中常常用到喜德，但一段時間不用總會忘記，這次記下來墙歪。
一听系、父組件傳給子組件
方法一：
1. 簡單，使用props傳遞數(shù)據(jù)虹菲，父組件調(diào)用子組件并傳遞數(shù)據(jù)靠胜，數(shù)據(jù)包括屬性和方法（String,Number,Boolean,Object, Array ,Function），子組件內(nèi)用props接收毕源。
- 例：父組件：
<child :message="hello"></child> //這里的message就是通信對應(yīng)的“接口”,hello是父組件內(nèi)的data或function
對應(yīng)子組件內(nèi):
<script> props:[ 'message' ] </script>
在子組件內(nèi)用起來和data一樣浪漠。
3. 注意：props是單向數(shù)據(jù)流，父組件屬性變化時霎褐，會傳遞給子組件址愿，反過來不會。這是為了防止子組件修改了父組件的狀態(tài)后冻璃，數(shù)據(jù)流變得難以理解响谓。若強行在子組件內(nèi)改變props损合，vue會在控制臺給出警告。
如果需要將其值作為局部數(shù)據(jù)來用或者處理成其他數(shù)據(jù)輸出娘纷，那么可以在data中定義變量嫁审，用props初始化來使用；若需要處理赖晶，可以在computed屬性中計算返回使用律适。
方法二：
1. 通過$on傳遞父組件方法，直觀的表現(xiàn)了子組件主動調(diào)用父組件的數(shù)據(jù)遏插。
- 例：
父組件：
<template>
<div>
<h3>父組件</h3>
<child @childEvent = "parentMethod"></child> //childEvent作為‘接口’擦耀，調(diào)用父組件的方法parentMethod
</div>
</template>
<script>
import child from '@/../child';
export default{
components:{child},
data(){
return{
parentMsg:"來自父組件的消息",
}
},
method{
parentMethod(){
alert(this.parentMsg)
}
}
}
</script>
子組件：
<template>
<div>
<h3>我是子組件</h3>
</div>
</template>
<script>
export default{
mounted(){
this.$emit('childEvent') //子組件通過emit調(diào)用父組件方法，childEvent作為‘接口’連接
}
}
</script>
二涩堤、子組件傳給父組件
方法一：$emit觸發(fā)
1. 通過$emit觸發(fā)眷蜓，子組件主動觸發(fā)父組件事件，同時傳遞數(shù)據(jù)胎围。子傳父不能像父傳子那樣直接傳遞直接接收吁系，需要通過觸發(fā)事件通知父組件才能傳遞。
- 例：
子組件： //子組件名：relationAnalyzeDialog
<template>
<button @click = "dialogFormEvent">取消</button> //觸發(fā)通知父組件的方法（有點繞白魂，理解了就好懂）
</template>
<script>
export default{
data(){
return{
dialogFormVisible:false,
}
},
methods:{
dialogFormEvent(){
this.dialogFormVisible = false;
this.$emit('change', this.dialogFormVisible) //觸發(fā)change汽纤，change是子父組件通信的對應(yīng)的“接口”， this.dialogFormVisible 為向父組件傳遞的數(shù)據(jù)
}
}
}
</script>
父組件：
<template>
<relationAnalyzeDialog @change = "dialogForm" :msg = "msg"></relationAnalyzeDialog> //監(jiān)聽子組件觸發(fā)的change福荸，調(diào)用本身的dialogForm方法蕴坪，并
</template>
<script>
components:{
relationAnalyzeDialog
},
data(){
return {
dialogFormVisible
}
}，
methods:{
dialogForm(msg){
this.dialogFormVisible = msg;
}
}
</script>
方法二：refs獲取
給子組件添加refs屬性敬锐，父組件在使用時通過this.$refs.childName....來獲取子組件的數(shù)據(jù)背传。
相當(dāng)于父組件主動調(diào)用子組件的數(shù)據(jù)。
PS總結(jié)：父組件應(yīng)處于高位台夺，擁有控制權(quán)径玖，對外交互的權(quán)利應(yīng)該交由父組件，所以常用的是 props和 $emit颤介。
下回有心得再補充梳星。
