vue.js組件通訊

因爲vue.js擁有多組件的特色，因此其中會涉及到組件之間的通訊，在學習vue.js兩週當中，通訊在整個系統開發是比較重要的，因此我把我兩週以來學習到的相關知識給你們分享一下！

相關的知識在官網中查詢

這張圖用文字表達就是：

1. 父組件向子組件發送信息運用props
2. 子組件向父組件發送信息運用emit

相關實例:

1、父組件向子組件發送信息

操做：當父組件文本框中輸入值，子組件接收到的值也會改變，由於使用了雙向綁定，以下圖所示

子組件接收值：這樣就完成了父組件向子組件發送值，props中還有許多操做，好比將傳送的類型從數組改成對象，用於限制數據類型等功能

補充：限制數據類型

因爲接收值類型應該爲Number類型，可是咱們傳送的是String,因此

2、子組件向父組件發送信息

這個操做與上一個通訊方式較複雜一丟丟，首先須要認識一個方法，相關概念查詢官網api就能夠知道，這裏不作太多解釋，
其中vm表明的是當前實例，在當前實例當中能夠運用this，或者let vm = this

當在子組件中點擊emit按鈕，就會將文本框的值發送給父組件

根據我我的理解，emit就是綁定一個自定義事件，後一個參數是所須要傳送的值

當子組件觸發my-event事件，也會觸發父組件中result方法

val就是子組件傳過來的值：

最終結果：

以上都是我的總結，如有不正確的地方，還請你們多多指教