vue組件之間互相傳值：父傳子，子傳父

 

今看到一篇很不錯的vue組件傳值文章，便於理解，遂作筆記～

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