---
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 的卡片 將 {{神秘文字}} 四個字傳至 卡斯伯的卡片
- 請截圖，並說明如何運作（範例如下，下圖絕對是錯誤的）

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

答：

>



## 挑戰二：團隊測驗

完成團隊測驗：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)

> 第十三題：如果上述有問題就排除，沒有就當沒事。在 <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>