---
# System prepended metadata

title: 第四堂：Vue 元件
tags: [Vue 直播班 - 2021 夏季班]

---

---
tags: Vue 直播班 - 2021 夏季班
---

# 第四堂：Vue 元件

## 課程提醒

錄影 
-  [報到](https://rpg.hexschool.com/training/18/calendar)  Code：dXM5NXEq2sRg
- 下週開始的額外支援活動（**救援服務即將登場**」
助教將會**在線回覆大家**的問題！）


## 學習提醒

學的時候好像會，真的要自己做卻不知道如何著手
- 看範例作品都會寫，蓋起來就不會
- 老師直播時都懂，但要自己運用就卡卡的
- 寫完作業好像失憶一般，再寫一次也不一定有把握

兩個解決方式：https://www.facebook.com/groups/110635703123103/permalink/702325553954112/
- 透過筆記
- 透過拆解：
![](https://i.imgur.com/pggZigI.png)



## 本週課綱

* 建立元件
* 元件資料傳遞
* 生命週期


## 建立元件
**為什麼要使用元件？**
常見拆分原因：
* 程式碼太長
* 部分元件需要多次運用
* 邏輯拆分，不同的功能使用獨立的元件進行運作
* Vue Router 時，每個元件都是獨立頁面
* 元件內外層說明
    * 元件註冊 -> 兩種方式
        * 全域註冊
        * 區域註冊 -> import 的手法
    * 模板運用
        * Template Literial
        * x-template type="text/x-template"
        * Vue Cli Vue file （概念與 x-template 相同）
    * 元件資料建構方式
        * function return
    * HTML 上的運用方式
        * 標籤
        * v-is 屬性（動態屬性）
    * 常見錯誤：
        * v-for 一定要搭配 key
        * 元件命名規則：
        *  [https://vue3js.cn/docs/zh/guide/component-registration.html#组件注册](https://vue3js.cn/docs/zh/guide/component-registration.html#%E7%BB%84%E4%BB%B6%E6%B3%A8%E5%86%8C) 


## 元件資料傳遞
為什麼要做資料傳遞
	- 實作必要知識：最終作業範例 ： [https://works.hexschool.io/#/](https://works.hexschool.io/#/) 
	- 面試常見考題
        
兩大體系：元件間傳遞、全域傳遞（下週介紹）
* HTML 是兩者串接的橋樑
* 上到下：props
	* 口訣：前面是名稱，後面是值 注意：單向數據流、HTML 屬性一律是小寫、該資料如果不存在，則可能會導致內層出錯
* 下到上：$emit（托球）
	* 口訣：emit 推，外 methods 接收
	* 口訣：HTML 前內，後外

## 生命週期
元件生命週期
https://vue3js.cn/docs/zh/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

* 生命週期範例
* 生命週期的問題
	* 搭配 v-if 的問題 <keep-alive>
	* v-if, v-show
	* jQuery 為什麼抓不到元素
	* created vs mounted 的資料處理差異


### 第四週任務
*  [第四週主線任務：元件化](https://rpg.hexschool.com/training/18/task?type=detail&id=182) 


### 課後建議學習章節
*  [元件章節影片](https://courses.hexschool.com/courses/vue-2021/lectures/31863178) 
推薦觀看章節：Methods、Watch、Computed 運算基礎運用
