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

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

環(huán)境搭建步驟：

• 打開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 運行該項目

剛剛我們創(chuàng)建的是vue基于webpack工具的一個模板項目，對于webpack和熱加載這些不熟悉的同學(xué)不必在意，我們現(xiàn)在不會過多關(guān)注webpack的，不過建議對vue有興趣的同學(xué)還是去了解一下webpack，它也算是vue開發(fā)中的一個必備工具

---

接著我們進入Demo，首先我們可以刪除掉模板項目中src/components/Hello.vue,然后在App.vue中刪除對于Hello子組件的注冊和使用還有一些其他無關(guān)緊要的東西，此時的App.vue應(yīng)為這樣

App.png

一.父組件向子組件傳值

1.創(chuàng)建子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中創(chuàng)建props，然后創(chuàng)建一個名為message的屬性

child.png

3.在App.vue中注冊Child組件，并在template中加入child標(biāo)簽，標(biāo)簽中添加message屬性并賦值

App2.png

4.保存修改的文件，查看瀏覽器

browser.png

5.我們依然可以對message的值進行v-bind動態(tài)綁定

App3.png

此時瀏覽器中

browser2.png

父組件向子組件傳值成功
總結(jié)一下：

• 子組件在props中創(chuàng)建一個屬性，用以接收父組件傳過來的值
• 父組件中注冊子組件
• 在子組件標(biāo)簽中添加子組件props中創(chuàng)建的屬性
• 把需要傳給子組件的值賦給該屬性

---

二.子組件向父組件傳值

1.在子組件中創(chuàng)建一個按鈕，給按鈕綁定一個點擊事件

Child2.png

2.在響應(yīng)該點擊事件的函數(shù)中使用$emit來觸發(fā)一個自定義事件，并傳遞一個參數(shù)

Child3.png

3.在父組件中的子標(biāo)簽中監(jiān)聽該自定義事件并添加一個響應(yīng)該事件的處理方法

App4.png

4.保存修改的文件，在瀏覽器中點擊按鈕

browser3.png

子組件向父組件傳值成功
總結(jié)一下：

• 子組件中需要以某種方式例如點擊事件的方法來觸發(fā)一個自定義事件
• 將需要傳的值作為$emit的第二個參數(shù)，該值將作為實參傳給響應(yīng)自定義事件的方法
• 在父組件中注冊子組件并在子組件標(biāo)簽上綁定對自定義事件的監(jiān)聽

在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。抓準(zhǔn)這兩點對于父子通信就好理解了

總結(jié)

以上是生活随笔為你收集整理的vue2.0 子组件和父组件之间的传值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。