DAY 12 - 拆 ! 拆 ! 拆 !，將 Vue 元件化 ( Component )

元件的概念

什麼是元件( Component ) ?

我們在開發上會將每個區塊進行拆分，讓他每個區塊獨立，可能會有header 、footer 、content，而 content 裡面可能又可以再拆分成個小區塊，這就是元件的概念，那為什麼要有元件化呢 ? 原因是因為不想看到過長的代碼及混合的程式碼，所以會將各自拆分成元件獨立出來最後再組合在網站，這樣做無論是在維護、閱讀上都很方便。

下圖可以看到我們將元件拆分然後組合到網站

匯入元件

首先在src > Components 先寫一個 HelloWorld.vue 這邊記得我用的是大駝峰寫法(兩個單字第一個大寫、不能有-)，我在裡面寫了一個 Hello打招呼 用 {{ }} 綁定至畫面(下圖)

HelloWorld.vue

接著將元件在要匯入的頁面匯入，這邊我示範匯入App.vue，在這邊我們要先引入 import再把要匯入元件<HelloWorld/>打再template裡，成功匯入 !!

app.vue

這邊我寫了兩種引入寫法兩種都可以用，在devtools 下可以看到成功匯入HelloWorld.vue 元件

組合元件

• 寫各個 .vue 元件，在此時各個元件獨立
  script - 寫 JavaScript
style - 寫css樣式
template - 寫html標籤
• import 引入到所需頁面，導入template
• 顯示 View

拆元件時機點

學會了元件概念、元件匯入引入方式，元件化後會讓專案更有條有理，接下來重點是如何分解網站變元件讓專案看起來簡潔、乾淨、好維護，剩下就是之後慢慢熟悉掌握拆元件時機與技巧，這邊分享幾個拆元件的大方向 :

• 有共用、重複時拆分 : 像是 header、layout、footer 常見共同區塊應該不必多說，如果網站有其他共通覺得重複也可以拆分
• 照區塊拆分 : 以大區塊進行拆分，讓他區塊更完整
• 照功能拆分 : 如果功能面比較龐大就可以照功能拆分獨立出去，未來維護上只要找這支檔案來維護即可
• 程式碼太長拆分 :超過 200~300 行程式碼會不易閱讀、太長，這時候就可以再拆分