什麼是Props?
- 外層元件要往內層元件丟資料時,需要藉由Props來執行任務
要如何使用靜態props傳入資源呢?
- 靜態props傳入情境:
- #1.首先,我們會先在內層元件裡面,定義props這個屬性:(這裡我們先用陣列方式作呈現)
- #2.我們要在props後面定義一個“名稱”,也就是我們要傳入變數的名稱(在這裡我們把:src="url"中的變數帶入到props的名稱中)
- #3.然後,我們會把props後面這個url變數,當作在“html的屬性”一樣,加到外層元件上,並且把圖片網址寫入在這個url屬性後方
- 上圖也可以想成,當我要從外層元件將url的資源網址傳入給內層元件時,我們會使用html的屬性方式將外層的資源傳入到內層元件 (也就是透過外層元件的html屬性/內層元件中的props名稱,兩者在此交會連結)
- #1.首先,我們會先在內層元件裡面,定義props這個屬性:(這裡我們先用陣列方式作呈現)
要如何使用動態Props方式傳入動態資源呢?
- 前內(props名稱),後外(外元件的變數名稱)
注意props是單向數據流
- 當外層元件向內層元件傳入資料時,即便你在內元件定義v-model試圖要雙向綁定資料,但這是無效的!!!
- 因為,外層元件向內層元件透過props屬性傳入資料,內層元件只能讀取資料,無法改變資料
命名限制
- 當我們在內層元件的props給名稱定義小駝峰的方式,要記得在html屬性寫入時,小駝峰要以dash-帶入,大寫並一律改為小寫
- 而html屬性一律都是用小寫的方式呈現