vue2.0父子組件間通訊實現

最近公司作項目要求使用vue，因而開始了vue的學習歷程，開始的時候，整我的都是懵逼的狀態， 公司項目也是比較複雜，可是開工沒有回頭箭，沒有結果的努力就是對工做的不負責任，因而乎下定 決心必定要搞清楚，如今項目已接近尾聲，大致來總結下知識點，本篇文章先來探討一下Vue子父組件通訊的問題。

首先建立兩個組件，分別爲父組件和子組件如圖

parent.png

child.png

通訊分爲兩種，一爲父組件向子組件傳值，二爲子組件向父組件傳值，接下來一一介紹：

1、父組件向子組件傳值

1. child.vue的中建立props(能夠驗證數據類型)，而後建立一個名爲message的屬性來接收

2 在父組件parent.vue中，註冊child組件,並在父組件中添加子組件模板，給message屬性傳入相應的值便可

打開服務器觀察，看到相應改變

固然message的屬性值也能夠動態綁定值,:message="變量名"，這裏不作敘述。

---

2、子組件向父組件傳值

1. 先在子組件添加個按鈕，點擊觸發事件進行傳值

2 在響應的事件中使用$emit來觸發自定義事件，並向父級傳參

（能夠看出如今的值爲空）

3 在父級添加響應事件，並監聽事件，能夠定義個變量childData來接收此值

如今點擊按鈕，觀看頁面

總結：不管是父組件向子組件傳值，仍是子組件向父組件傳值，都須要中介，父組件向子組件傳值須要props屬性，子向父須要使用$emit觸發自定義方法，知道這兩點應該就差很少了。

剛接觸vue，不對的地方還請多多指教，歡迎探討