---
# System prepended metadata

title: 第四週團隊任務 - 第22組
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---

# 第四週團隊任務 - 第22組

| 組員      | 報到 | 
| --------- | -------- | 
|Curtis#4780|V
|Hed#9414|
|hsiu#8767|V
|hsufengs#2816|
|hua#9099|
|MengLin#3001|V
|YUN#4159|
|拓子#0577|
|豆豆#9088|

請透過線上會議或 Discord 討論，解答此問題集。

## 挑戰一：團隊成員一起搞定元件觀念

題目：https://codepen.io/Wcc723/pen/OJpxVJb?editors=1010

這是一連串的神秘問題，請問：

- 全域註冊的卡片中，有哪幾個是有運用的（card-a, card-b）

**card-a**

- 題目上，卡斯伯的卡片、Ray 的卡片，其中何者的 magicData 在初始狀態，就能接收到 "神秘文字" 這四個字

**卡斯伯的卡片**

![](https://i.imgur.com/xucJcwA.png)

- 畫面上的 卡斯伯的卡片, Ray 的卡片，其中有一個按鈕可完整傳遞資料至另一個，請問是在本範例中是： 
    a. 卡斯伯的卡片 將 {{神秘文字}} 四個字傳至 Ray 的卡片
    b. Ray 的卡片 將 {{神秘文字}} 四個字傳至 卡斯伯的卡片

**a.卡斯伯的卡片 將 {{神秘文字}} 四個字傳至 Ray 的卡片**

- 請截圖，並說明如何運作（範例如下，下圖絕對是錯誤的）

![](https://i.imgur.com/SQXS3bl.png)

**主要以下兩點：**
1. 只有卡斯伯的卡片有值
2. 只有 Ray 的卡片可以接收變數
![](https://i.imgur.com/nNzj0RS.png)



提示：
- 其中一個卡片無法接收動態資料
- 請注意，在此有用到 v-bind: 動態屬性，專門傳遞 “變數”
- JS 變數使用中文是可以運作的
- 想看答案：可以把 {{magicData}} 加入到元件內，馬上就能了解運作

## 挑戰二：團隊測驗

完成團隊測驗：https://bejewled-air-4cb.notion.site/0f01125cc7fa45aa99dd3d0c932f57b5

填寫表單：https://docs.google.com/spreadsheets/d/1nJKppCMCfGraYtiM74sf0L6uhw6EOXT3ye3x_02RKaU/edit?usp=sharing

## 對話截圖
![](https://i.imgur.com/kvEMt9F.png)

![](https://i.imgur.com/U6XSi6N.png)