---
# System prepended metadata

title: "\U0001F3C5 Day 42"
tags: [Vue 直播班 - 2022 春季班]

---

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

# 🏅 Day 42
###### tags: `Vue 直播班 - 2022 春季班`

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/rider159159/pen/vYxVKVa)，執行以下要求 (只能操作 JS 的部分):

> props 型別驗證
> - 在 props-com 元件中的 props 設定 childNum 、 childObject 讓畫面分別顯示他們的值。
> - 在根元件不傳出 childNum 的情況下，在 props 中，為 childNum 設定預設值 100 。
> -  childNum 、 childObject 需要分別設定 Number 、 Object 型別，可參考 childString 設定。
> - 實際狀況如圖:
> ![](https://i.imgur.com/tEUfl0k.png)
> - 若是 props 傳入值的型別，與設定不同，雖然仍可使用，但會跳出警告，以方便開發時 debug。

 參考: https://courses.hexschool.com/courses/vue-20212/lectures/35988965

回報流程
---
請同學依照下圖教學觀看解答、回報答案:

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

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

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

<!-- 解答
  app.component('props-com', {
    props:{
      childString:{
        type: String,
      },
      childNum:{
        type: Number,
        default: 100
      },
      childObject:{
        type: Object,
      },
    },
    template:
      `<div>{{ childString }}</div>
       <div>{{ childNum }}</div>
       <div>{{ childObject }}</div>
        `,
  });
 
-->

回報區
---
| 報數 | 組別-名字  | codepen / 其他回饋                                |
|:----:|:----------:| ------------------------------------------------- |
| 1 | Iris Huang | https://codepen.io/ythuang/pen/oNoarwL |
| 2 | Larry | https://codepen.io/larrylinr5/pen/mdqzZww?editors=1111 |
| 3 | CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/QWOZXEx|
| 4 | Jason Chen | https://codepen.io/jason60810/pen/RwjezLV |
| 5 | Bruno Yu | https://codepen.io/bruno-yu/pen/podxXwq |
| 6 | 威爾 | https://codepen.io/WILL_Wu/pen/NWwOZOO |
| 7 | Pei Ying | https://codepen.io/Pei-Ying/pen/LYOgwEL|
| 8 | Arista | https://codepen.io/arista-hsieh/pen/gOXBVzE|
| 9 | andersonshen | https://codepen.io/luxyenni-the-bold/pen/YzEJmJJ |
|10|Rick Tzeng| https://codepen.io/rick917jp6/pen/oNoaKGE |
|11|Gill| https://codepen.io/Gill-Chin/pen/oNoQvwO?editors=1010 |
| 12 | Yunei | https://codepen.io/Yunei/pen/jOaQNGw |
| 13 | EmptyWu |https://codepen.io/emptywu/pen/KKyrPBy |
|14|Sheep| https://codepen.io/SheepNDW/pen/qBVQWJG |
|15|陳暐中| https://codepen.io/wei-z/pen/VwrVwmj?editors=1010|
|16|kk|https://codepen.io/potatokaka/pen/KKyrKVB?editors=1011|
| 17 | 黃士桓 | https://codepen.io/shr-huan-huang/pen/WNXYNqP |
|18| Otis | https://codepen.io/humming74/pen/OJOaJYw?editors=1010 |
| 19 | 肉鬆 | https://codepen.io/klrkicog/pen/QWOJwoy?editors=1010 |
| 20 | Team01-Aya | https://codepen.io/NoNameNote/pen/LYOXEXm | 
| 21 | Henry Wu |https://codepen.io/dkcmlaww-the-flexboxer/pen/XWzymYW
|22|有廖先生(Rain)|https://codepen.io/billpop741/pen/yLPQeKO|
|23|shio|https://codepen.io/shioyen/pen/podQNbe
| 24 | 咖咖 | https://codepen.io/gon790219/pen/JjOeWry |
| 25 | POPEYE | https://codepen.io/popeye_ux/pen/gOXQzRd |
| 26 | Wenfish | https://codepen.io/wenfisht/pen/yLPQQgx |
| 27 | Charlotte Lee | https://codepen.io/charlotte-lee/pen/WNXYWzq |
| 28 | sally | https://codepen.io/intelligence753/pen/dyZQBwp?editors=1010 |
| 29 | Karen Huang | https://codepen.io/Coding_Snorlax/pen/abVQgQz?editors=1011 |
| 30| Tim Lin |https://codepen.io/TimmyLin/pen/VwrqwXj|
| 31 | YC | https://codepen.io/YCLu/pen/ZEaVvRb |
| 32 | 我是泇吟 | https://codepen.io/kljuqbxs/pen/wvPRRxR |
| 33 | Bonnie | https://codepen.io/bonnieli1414/pen/QWOzPbV?editors=1010 |
| 34 | Jasper | https://codepen.io/li-jasper/pen/zYPbOvK |
| 35 | ZY Hsu | https://codepen.io/zihyin/pen/xxPBxLQ?editors=1010 |
| 36 | mei | https://codepen.io/Shila-Chen/pen/LYOaOzq |
| 37 | Judy☻ | https://codepen.io/hsiaohan/pen/yLPrebq?editors=1010 |
| 38 | 紙飛機 | https://codepen.io/paperplanea/pen/qBpBZWy |
| 39 | sihle | https://codepen.io/bugbug777/pen/RwxwpvE |
|40|Gui|https://codepen.io/guitimliu/pen/MWrxbEr
|41|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/rNJBzvo |