最近公司的一個項目中使用 Vue 2.0 + element UI 實現一個后台管理系統的前端部分，屬於商城類型。其中部分頁面是數據管理頁，所以有很多可以復用的表格，故引入自定義組件。在這里分享一下開發的過程。
一、父組件向子組件傳值
圖 1 - 1 父組件.png
這邊實現的是從父組件向子組件動態傳值，傳的是一個對象。在子組件上動態綁定要傳入的對象，如果是靜態數據（如："Hello World!"）則無需屬性名前的冒號，並且需要在 components 中聲明。
圖 1 - 2 子組件.png
首先創建 props ，然后在 props 中創建對應的屬性名，之后即可在 template 中使用接收到的對象。
圖 1 - 3 接收對象后的效果圖
總結一下： 父組件向子組件傳對象（值）成功 • 在父組件中注冊並引用子組件 • 使用子組件時在子組件上添加一個屬性，並綁定上數據 • 在子組件中創建 props ，在props 中創建相同的屬性名，用來接收數據 • 把接收到的數據在子組件中使用
二、子組件向父組件傳值
圖 2 - 1 子組件.png
首先在子組件創建一個按鈕，給這個按鈕綁定一個點擊事件。上圖是子組件中又調用了其他的組件（分頁組件），我這邊是子組件把頁碼傳遞給父組件，父組件拿着頁碼去請求數據，原理和按鈕綁定點擊事件是相同的道理。
然后在方法中添加以下代碼：
pageChange(v){
this.$emit('toPage', v)
}
圖 2 - 2 父組件.png
在父組件的子組件標簽中監聽該事件並添加一個響應事件來處理數據。點擊分頁組件上的頁碼按鈕或點擊創建的按鈕，在響應事件中使用數據，可觀察到傳值成功。
總結一下： 子組件向父組件傳值成功
• 子組件中需要發出該自定義事件，可以是按鈕的點擊事件，也可以是其他方式
• 將需要傳的值放在 $emit 第二個參數的位置，這個參數會被傳給父組件中的響應方法
• 需要在父組件中使用子組件並在子組件標簽上綁定對事件的監聽
在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。