---
# System prepended metadata

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

---

---
tags: vue 直播班 - 2022 冬季班
---
# 第四週團隊任務 - VUE 班 6 組
> 討論日期及時間 > 2023/01/14 20:30-22:00
> 
**組員參與名單(07 / 10)：**
- [x] christina#6185
- [x] hungya#0773
- [x] yuyu#6310
- [x] Potatolee#7749
- [x] Tuhacrt#0008
- [x] 灰塵貓#7994
- [ ] Wei#2330
- [ ] Keith 宇凡#3890
- [x] 阿仁#0914
- [ ] 阿鑫#4346

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

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

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

- 全域註冊的卡片中，有哪幾個是有運用的（card-a, card-b）
- 題目上，卡斯伯的卡片、Ray 的卡片，其中何者的 magicData 在初始狀態，就能接收到 "神秘文字" 這四個字
- 畫面上的 卡斯伯的卡片, Ray 的卡片，其中有一個按鈕可完整傳遞資料至另一個，請問是在本範例中是： 
    a. 卡斯伯的卡片 將 {{神秘文字}} 四個字傳至 Ray 的卡片
    b. Ray 的卡片 將 {{神秘文字}} 四個字傳至 卡斯伯的卡片
- 請截圖，並說明如何運作（範例如下，下圖絕對是錯誤的）
![](https://i.imgur.com/SQXS3bl.png)


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

答：
![](https://i.imgur.com/B3pJUP9.png)

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

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

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






## 挑戰二：團隊測驗

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

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

答：



| 題目 | 答案 | 正解及備註 |
| -------- | -------- | -------- |
| 題目01     |   3  | 3  |
| 題目02     |   1  | 1  |
| 題目03     |   3  | 3  |
| 題目04     |   4  | 4  |
| 題目05     |   2  | 4  |
| 題目06     |   1  | 1  |
| 題目07     |   4  | 4  |
| 題目08     |   `app.component('card',card)`| `app.component('card',card)`  |
| 題目09     |  `<card:outer-text="text"/>`  | `:outer-text="text"`  |
| 題目10     |   2  | 2  |
| 題目11     |   2  | 2  |
| 題目12     |   3  | 1  |
| 題目13     |  ` <card@send="getData"/>`| `@send="getData"`  |
| 題目14     |   2  | 2  |
| 題目15     |   1  | 1  |





## 討論紀錄
> v-is [參考連結](https://www.jianshu.com/p/b0c16bab3388)
![](https://i.imgur.com/BAHRO8I.png)


> 第十三題：如果上述有問題就排除，沒有就當沒事。在 <card/> 元件中，需要家入怎樣的片段使外層可以接收到內層的事件？
```
//可以怎麼改
const card = {
  data() {
    return {
      text: '這是一段文字'
    }
  },
  template: `<form>
    <button 
      @click.prevent="sendData">
      按我
    </button>  
  </form>`,
  methods: {
    sendData() {
      this.$emit('send', this.text)
    }
  }
}
// 下方錯誤修正
const app = Vue.createApp({
  methods: {
    getData(text) {
      console.log(text);
    }
  },
});

app.component('card', card);
app.mount('#app');
```

---


> 謝謝今天有參與的同學們 :100: 
> 
<iframe src="https://giphy.com/embed/l2JJCrTXXBTAVMJqM" width="480" height="361" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/warnerarchive-classic-film-alfred-hitchcock-suspicion-l2JJCrTXXBTAVMJqM"></a></p>
