一般頁面的視圖App.vue應為這樣
一.父組件向子組件傳值
1.創建子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中創建props，然后創建一個名為message的屬性
3.在App.vue中注冊Child組件，並在template中加入child標簽，標簽中添加message屬性並賦值
4.保存修改的文件，查看瀏覽器
5.我們依然可以對message的值進行v-bind動態綁定
此時瀏覽器中
父組件向子組件傳值成功
總結一下：
- 子組件在props中創建一個屬性，用以接收父組件傳過來的值
- 父組件中注冊子組件
- 在子組件標簽中添加子組件props中創建的屬性
- 把需要傳給子組件的值賦給該屬性
二.子組件向父組件傳值
1.在子組件中創建一個按鈕，給按鈕綁定一個點擊事件
2.在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數
3.在父組件中的子標簽中監聽該自定義事件並添加一個響應該事件的處理方法
4.保存修改的文件，在瀏覽器中點擊按鈕
子組件向父組件傳值成功
總結一下：
- 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
- 將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
- 在父組件中注冊子組件並在子組件標簽上綁定對自定義事件的監聽
在通信中，無論是子組件向父組件傳值還是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓准這兩點對於父子通信就好理解了
---恢復內容結束---
今看到一篇很不錯的vue組件傳值文章，便於理解，遂做筆記～
一般頁面的視圖App.vue應為這樣
一.父組件向子組件傳值
1.創建子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中創建props，然后創建一個名為message的屬性
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中的屬性。抓准這兩點對於父子通信就好理解了