# 元件基本介紹

## 為什麼要拆解成元件
> 1. 增加程式碼的可複用性
> 2. 增加單一檔案過大
> 3. 易於管理及協作
> 4. 元件功能獨立化

1. **增加程式碼的可複用性**
網頁上有類似、功能很接近的區塊，如果拆分成不同片段或檔案，不好管理，當需要修改時，所有部分都要去逐一修改。
將功能元件化，讓相同的程式碼可以同時放在不同地方，而且修改時，只需要修改元件就好。

2. **避免單一檔案過大**
如果將所有程式碼寫在同一檔案，程式碼容易過長。建議開發時，單一檔案最多 200行至 300行，沒有進行檔案拆分，就容易超過。

3. **易於管理及協作**
如果沒有拆分，跟夥伴撰寫在同一檔案上，不管有無版控工具，都容易產生衝突。元件化可以避免上述問題。

4. **元件功能獨立化**
頁面上有很多區塊，有的靜態，有的要跟遠端請求資料。將功能獨立出來，讓讀取效果只發生特定區塊，其他元件維持原本靜態行為。有效拆分能讓使用者體驗更佳。

## 頁面元件結構
根元件稱為 root 元件，根元件下面可以掛載很多個子元件，例如：Header、content、side等，元件下可以有很多個階層，side 等子元件下面能再掛載其他子元件。

## 元件資料獨立
元件中的資料都是**獨立**的，因此就算同名，裡面的資料也是不同的。

## 元件資料傳遞

元件資料獨立的情況下，需要使用 Vue 的方法傳遞。由上而下傳送資料 (side -> component)，透過 Props 來傳遞；子元件傳遞資料或呼叫上層元件的行為，稱為「Emit Event」。

<!-- | 傳遞方向 | 傳遞方法 |
| -------- | -------- |
| 上(外)層到下(內)層 | props |
| 下(內)層到上(外)層 | emit |
-->

## SPA
SPA 是指 Single-Page Application 單頁式應用程式，需要使用元件來建構才能完成。


### 參考資料＋圖片來源
- [六角 2022 Vue 直播班](https://www.hexschool.com/courses/vue-training.html)

###### tags: `Vue` `六角 2022 Vue 直播班`