元件介紹-Day01


為什麼要拆解成元件?

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

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

元件資料獨立

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

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

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

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

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







你可能感興趣的文章

[02] Functional Component

[02] Functional Component

利用 JavaScript 實作簡易 TodoList

利用 JavaScript 實作簡易 TodoList

[JS] 認識變數:let、const、var

[JS] 認識變數:let、const、var






留言討論