vuecli2.0值傳遞總結

一.組件間的數據傳遞

1.父子組件

在一個組件內定義另一個組件,稱爲父子組件

子組件只能在父組件內部使用

默認情況下,子組件無法訪問父組件中的數據,每個組件實例的作用域是獨立的。

 

2.組件間數據傳遞(通信)

2.1子組件訪問父組件的數據。

a.在調用子組件時,綁定想要獲取的父組件中的數據

b.在子組件內部,使用props選項聲明獲取的數據,及接受來自父組件的數據。

總結:父組件通過props向下傳遞數據給子組件。

注:組件中的數據共有三種形式:data,props,computed

 

2.2 父組件訪問子組件的數據

a.在子組件中使用vm.$emit(事件名,數據)觸發一個自定義的事件,事件名自定義。

b.父組件在使用子組件的地方監聽子組件觸發的事件,並在父組件中定義方法,用來獲取數據。

總結,子組件通過events給父組件發送消息,實際上就是子組件把自己的數據發送到父組件。

 

對應的截圖如下:

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章