| 父傳子 |
我們什麼時候需要父組件傳值給子組件呢？
當我們的父組件需要控制子組件中顯示的內容或者顯示的值時。需要將父組件中的內容傳遞到子組件。
具體實現步驟：
首先需要將子組件引入到父組件當中（在父組件中的引入代碼：）
//引入子組件
import Son from "../components/Son.vue"
//註冊子組件
components:{
Son,
},
在父組件中設置需要傳入子組件的變量，並傳入子組件
//在data當中設置傳入的變量值
data(){
return{
giveSon:"收到父組件的值"
}
},
//在頁面中將值傳入子組件,冒號表示v-bind，綁定data中的變量
<son :fromFather="giveSon"></son>
在子組件中接收父組件的傳值，並使用
//接收父組件傳入的值
props:{
fromFather:{
type:String,
default:''
},
},
//在頁面中使用即可
<div class="son">{{fromFather}}</div>
注意點：
①：名字問題，三個地方的變量名要保持一致。
②組件中的props
組件中的props中的變量都是父組件傳值過來的，並且是單向傳遞，所以我們無法在子組件中改變props中的變量。
如果試圖改變那麼就會報錯。
那麼怎麼實現改變props中的值呢？
請看本篇博客
| 子傳父 |
我們什麼時候需要子組件傳值給父組件呢？
一般情況下在父組件的頁面中對子組件進行點擊後，需要獲取到子組件的返回值或者內容，這個時候我們需要使用到子組件傳值給父組件。
具體實現步驟：
父組件中引用子組件的地方設置好接受值的事件
//其中valueChange就是綁定的事件，getValue是事件觸發的方法
<son @valueChange="getValue"></son>
{{fromSon}}
//getVaule事件
getValue(getValue){//getValue是接收子組件
this.fromSon=getValue//fromSon是父組件中的一個變量，在頁面中顯示
}
子組件中傳值過去，
使用emit方法，而方法的第一個變量是父組件中使用子組件所綁定的事件名稱，第二個變量是傳過去的值。
//使用emit方法,give是子組件中按鈕點擊事件綁定的方法
give() {
this.$emit('valueChange',"傳值成功了！")
}
傳值過去的結果如下：
