元件介紹-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屬性一律都是用小寫的方式呈現