---
# System prepended metadata

title: 小組Vue第二週複習

---

# ==討論日期 : 5/17 ( 五 )==




## 💖 本週複習 🥰



### ==1. 請試著回答為什麼要使用元件==

#### 相關知識點


#### 大家回答
- 可以重復利用
- 提供了 HTML DOM 元素的擴充性，也可將部分模板、程式碼封裝起來以便開發者維護以及重複使用。
- 另外我有用到的地方是，之前有用到手風琴，然後每一筆手風琴資料都是 v-for 渲染的。 但是因為他需要有綁定，所以我就拆成元件，就可以在每個元件裡面用 ref 綁定，就不會出現點了第一個手風琴結果全部都打開的問題～ 
- 元件功能獨立化
<br>

### ==2. 什麼是 props？它們在 Vue 元件中有什麼作用？==

#### 相關知識點
- [Props](https://book.vue.tw/CH2/2-2-communications.html#props)

#### 大家回答
- 將資料由外層傳入內層，在內層只可讀不可寫入。
<br>

### ==3. 請解釋 Vue 單向數據流是什麼==

#### 相關知識點
-[關於 Vue Props 單向資料流這件事](https://israynotarray.com/vue/20230416/2047647199/)


#### 大家回答
- props 傳進去的資料，在內層不能去修改外部的資料但是用物件傳進去，第二層以下還是可以改...
<br>

### ==4. Vue 中的 $emit 是什麼，還記得要如何用 3 個步驟使用嗎？==

#### 相關知識點

#### 大家回答
- emit 用於子層要修改父層資料時可以觸發的。
- 撰寫流程參考：
    1. 先定義外層接收的方法
    2. 定義內層的 $emit 觸發方法
    3. 使用 v-on 的方式觸發外層方法（口訣：前內、後外）
<br>


### ==5. 全局註冊和局部註冊 Vue 元件的區別在哪呢==

#### 相關知識點
- [组件注册](https://cn.vuejs.org/guide/components/registration.html)

#### 大家回答
- 全局註冊是全部元件都能使用；局部註冊是只有註冊的那個元件本身可以使用。
- GPT 回答
    ![image](https://hackmd.io/_uploads/B1oV_kBXC.png)
<br>

### ==6. [測驗複習](https://casper-wang.notion.site/a8930614c2334a52bb28954be94f0b9f)==


## 額外補充
- [Vue3 如何用 defineModel 實作 props/ emit 的父子元件傳值，讓傳值變得更方便簡單](https://muki.tw/vmodel-definemodel-props-emit/?fbclid=IwZXh0bgNhZW0CMTAAAR3pTRPVydMmd4kKHvUGxm1OYQTqAcVCOv3NL1UruUqVYPQnVP8pTtmOwC0_aem_AaD2kLilHSmYd5kQWf4UHdcd-_Ks3cKgGdhF-3BlFMuj_WooAnS6nvnuYdY0eT7s33UU4lDKDmpl2LZavMH2iGlb)
- [從 Vuex 到 Pinia：Vue 狀態管理的進化](https://5xcampus.com/posts/from-vuex-to-pinia.html)
