---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 42 - props 型別驗證

觀看完課程影音「元件型別驗證」後，練習下方題目。

題目
---
操作 [這個模板](https://codepen.io/hexschool/pen/oNPvGpx)，執行以下要求（只能操作 JS 的部分）：

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

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：

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>
`,
});

-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615 |[Codepen](https://codepen.io/wendy03/pen/PodZQLY) |
| 冬天#5215 |[Codepen](https://codepen.io/winter_/pen/QWVyQRK) |
| JackC#0411 |[Codepen](https://codepen.io/key0329/pen/OJoMQKV) |
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/LYJGdPX?editors=1010) |
| 小木馬#8760 |[Codepen](https://codepen.io/wmmtbcsd/pen/yLxeKez) |
| Potatolee#7749 |[Codepen](https://codepen.io/potatoleee/pen/KKxVopmeditors=1011)|
| LinaChen#1796 |[Codepen](https://codepen.io/LinaChen/pen/zYJrRVW)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/bGxEvrq?editors=1012)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/mdGVxMe) |
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/yLxeKzv)|
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/dyqGmdb)|
|無名#6427|[CodePen](https://codepen.io/Nomoney/pen/YzOybNJ)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/PodZRBb)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/gOdPejw)|
|法希娜#3206|[codepen](https://codepen.io/yiiserpf-the-encoder/pen/bGxEvXa)|
|Alex#9978|[codepen](https://codepen.io/datsxzqg-the-selector/pen/oNPbdvj)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/LYJGmZG)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/BaOjxpY)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/JjaGvxE)|
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/ZEMQRbQ)|
|int#7518|[Codepn](https://codepen.io/intHuang/pen/poOgLed?editors=1010)|
|楊苡安#2752|[Codepn](https://codepen.io/yi-an-yang/pen/LYJGJpp)|
|出事了阿伯#9923|[Codepn](https://codepen.io/BradpittLai/pen/abadajN?editors=1010)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/rNZxqRG?editors=1010)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/wvEMmBG)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/ZEMzxmB)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/JjaGwmR)|
圈圈#4060|[codepen](https://codepen.io/wjejfczn-the-bold/pen/PodZgEQ?editors=1010)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/YzOwMZN) |
|泊岸#3466| [Codepen](https://codepen.io/qoq77416416/pen/jOvWRvJ?editors=1010) |
|MengLin#3001| [Codepen](https://codepen.io/aacj2642/pen/gOdPJOj) |
Zack_P#1805| [Codepen](https://codepen.io/tmzazirh-the-animator/pen/VwGeOVE?editors=1010) |
|Austyn#0949| [Codepen](https://codepen.io/fish90547/pen/RwYrXbG?editors=1010) |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/ZEMWJOV)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/wvEGqgP)
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/JjaGqWr?editors=1010)
|YI#0863|[codepen](https://codepen.io/YI0305/pen/QWVNVEQ?editors=1011)|
|Bassjim#0118|[codepen](https://codepen.io/unrtxbaq/pen/PodzwOj?editors=1111)|
|DIO大人#4776|[codepen](https://codepen.io/wendy03/pen/PodZQLY)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/rNZLErY?editors=1011)|
|柚子#3958|[codepen](https://codepen.io/as6625998/pen/KKxgGNr?editors=1011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/bGxpgep)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/qBMXJaV)
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/xxyrEeM)