元件介紹-Day04 # Props 向內層元件傳遞資料狀態


什麼是Props?

  • 外層元件要往內層元件丟資料時,需要藉由Props來執行任務

要如何使用靜態props傳入資源呢?

  • 靜態props傳入情境:
    • #1.首先,我們會先在內層元件裡面,定義props這個屬性:(這裡我們先用陣列方式作呈現)
    • #2.我們要在props後面定義一個“名稱”,也就是我們要傳入變數的名稱(在這裡我們把:src="url"中的變數帶入到props的名稱中)
    • #3.然後,我們會把props後面這個url變數,當作在“html的屬性”一樣,加到外層元件上,並且把圖片網址寫入在這個url屬性後方
    • 上圖也可以想成,當我要從外層元件將url的資源網址傳入給內層元件時,我們會使用html的屬性方式將外層的資源傳入到內層元件 (也就是透過外層元件的html屬性/內層元件中的props名稱,兩者在此交會連結)

要如何使用動態Props方式傳入動態資源呢?

  • 前內(props名稱),後外(外元件的變數名稱)

注意props是單向數據流

  • 當外層元件向內層元件傳入資料時,即便你在內元件定義v-model試圖要雙向綁定資料,但這是無效的!!!
  • 因為,外層元件向內層元件透過props屬性傳入資料,內層元件只能讀取資料,無法改變資料

命名限制

  • 當我們在內層元件的props給名稱定義小駝峰的方式,要記得在html屬性寫入時,小駝峰要以dash-帶入,大寫並一律改為小寫
  • 而html屬性一律都是用小寫的方式呈現

#Props







你可能感興趣的文章

學習筆記搬新家─來到 CoderBrige

學習筆記搬新家─來到 CoderBrige

D21_修正第二週作業、繼續第三週

D21_修正第二週作業、繼續第三週

MTR04_1201

MTR04_1201






留言討論