Vue是一個輕量級的漸進式框架，對於它的一些特性和優點在此就不做贅述，本篇文章主要來探討一下Vue子父元件通訊的問題

首先我們先搭好開發環境，我們首先得裝好git和npm這兩個工具(如果有不清楚的同學請自行百度哦)

環境搭建步驟：

• 開啟git ，執行 npm install --global vue-cli 這是安裝vue的命令列
• vue init webpack vue-demo 這是vue基於webpack的模板專案
• cd vue-demo 進入vue-demo資料夾
• npm install 安裝package.json中依賴的node_modules
• npm run dev 執行該專案

剛剛我們建立的是vue基於webpack工具的一個模板專案，對於webpack和熱載入這些不熟悉的同學不必在意，我們現在不會過多關注webpack的，不過建議對vue有興趣的同學還是去了解一下webpack，它也算是vue開發中的一個必備工具

接著我們進入Demo，首先我們可以刪除掉模板專案中src/components/Hello.vue,然後在App.vue中刪除對於Hello子元件的註冊和使用還有一些其他無關緊要的東西，此時的App.vue應為這樣

App.png

一.父元件向子元件傳值

1.建立子元件，在src/components/資料夾下新建一個Child.vue
2.Child.vue的中建立props，然後建立一個名為message的屬性

child.png

3.在App.vue中註冊Child元件，並在template中加入child標籤，標籤中新增message屬性並賦值

App2.png

4.儲存修改的檔案，檢視瀏覽器

browser.png

5.我們依然可以對message的值進行v-bind動態繫結

App3.png

此時瀏覽器中

browser2.png

父元件向子元件傳值成功
總結一下：

• 子元件在props中建立一個屬性，用以接收父元件傳過來的值
• 父元件中註冊子元件
• 在子元件標籤中新增子元件props中建立的屬性
• 把需要傳給子元件的值賦給該屬性

二.子元件向父元件傳值

1.在子元件中建立一個按鈕，給按鈕繫結一個點選事件

Child2.png

2.在響應該點選事件的函式中使用$emit來觸發一個自定義事件，並傳遞一個引數

Child3.png

3.在父元件中的子標籤中監聽該自定義事件並新增一個響應該事件的處理方法

App4.png

4.儲存修改的檔案，在瀏覽器中點選按鈕

browser3.png

子元件向父元件傳值成功
總結一下：

• 子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件
• 將需要傳的值作為$emit的第二個引數，該值將作為實參傳給響應自定義事件的方法
• 在父元件中註冊子元件並在子元件標籤上繫結對自定義事件的監聽

在通訊中，無論是子元件向父元件傳值還是父元件向子元件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對於父子通訊就好理解了