父子元件傳值原理圖

一般頁面的檢視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中的屬性。抓準這兩點對於父子通訊就好理解了