廢話不多說直接走起
環(huán)境搭建步驟：
運行 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 運行該項目
image
一.父組件向子組件傳值
1.創(chuàng)建子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中創(chuàng)建props，然后創(chuàng)建一個名為message的屬性
image
3.在App.vue中注冊Child組件，并在template中加入child標簽，標簽中添加message屬性并賦值
image
4.保存修改的文件，查看瀏覽器
image
5.我們依然可以對message的值進行v-bind動態(tài)綁定
image
此時瀏覽器中
image
父組件向子組件傳值成功
總結一下：
- 子組件在props中創(chuàng)建一個屬性，用以接收父組件傳過來的值
- 父組件中注冊子組件
- 在子組件標簽中添加子組件props中創(chuàng)建的屬性
- 把需要傳給子組件的值賦給該屬性
二.子組件向父組件傳值
1.在子組件中創(chuàng)建一個按鈕，給按鈕綁定一個點擊事件
image
2.在響應該點擊事件的函數(shù)中使用$emit來觸發(fā)一個自定義事件，并傳遞一個參數(shù)
image
3.在父組件中的子標簽中監(jiān)聽該自定義事件并添加一個響應該事件的處理方法
image
4.保存修改的文件，在瀏覽器中點擊按鈕
image
子組件向父組件傳值成功
總結一下：
- 子組件中需要以某種方式例如點擊事件的方法來觸發(fā)一個自定義事件
- 將需要傳的值作為$emit的第二個參數(shù)，該值將作為實參傳給響應自定義事件的方法
- 在父組件中注冊子組件并在子組件標簽上綁定對自定義事件的監(jiān)聽
在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質(zhì)，子向父的介質(zhì)是自定義事件，父向子的介質(zhì)是props中的屬性。抓準這兩點對于父子通信就好理解了
覺得有用的小伙伴點個關注和小紅心就行??，么么噠。
