---
# System prepended metadata

title: Untitled
tags: [Vue 實戰班]

---

---
tags: Vue 實戰班
---

## 第四週目標

- 主線任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2FkAZfOQkbRUOYaQbr58qDLw
- 團隊任務：https://hackmd.io/@hexschool/HJDbvkFqU/%2F7v0KRfEWRIm56whKigMnog


## 本週三大重點：

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


### 1. 建立元件

- 元件註冊 -> 兩種方式
	- 全域註冊
	- 區域註冊
- 模板運用
	- Template Literial
	- x-template `type="text/x-template"`
	- Vue Cli Vue file （概念與 x-template 相同）
- 資料建構
    - 必定使用 function return
-  HTML 上的運用方式
	- 標籤
	- is 屬性
- 常見錯誤：
	- 元件最外層需要是單一元素
	- v-for 一定要搭配 key
	- 元件命名規則：https://cn.vuejs.org/v2/guide/components-registration.html


### 2. 元件資料傳遞

- 兩大體系：全域傳遞、元件間傳遞
    - 外到內 -> 資料
    - 內到外 -> 事件
    - 元件到元件 -> 事件
- 元件外到內傳遞（資料）
    - 注意：
        - 單向數據流
        - HTML 屬性一律是小寫
- 元件內到外（事件）
    - 使用 emit 發送
    - 外層 methods 接收
- 全域（Event Bus）
    - emit 發送
    - bus 接收


### 元件生命週期

https://cn.vuejs.org/v2/guide/instance.html

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