元件介紹-Day01

為什麼要拆解成元件？

• 增加程式碼的可複用性
• 避免單一檔案過大(建議不要超過200~300行)
• 易於管理及協作
• 元件功能獨立化

元件化後網頁元件結構會是怎樣呢？

元件資料獨立

• 每個元件的資料都是獨立的
• 例如下圖:
  • 在side下(上層元件)的myData與其他元件(下層元件)的myData的資料都是不同的並且獨立的
    

元件資料獨立與如何傳遞：Props v.s Emit Event

• 那資料如何做到彼此溝通與傳遞呢？
  
• 需要透過vue的方法Props將上層元件side傳遞資料給下層元件
• 子元件往上傳資料給上層元件需要透過Emit的方法或是去呼叫外層的元件的事件

SPA單頁式應用程式也是使用元件

• User Page也是一個元件繼而掛載其他元件