---
# System prepended metadata

title: "\U0001F3C5 Day 42 - props 型別驗證"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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 設定。
> - 實際狀況如圖：
> ![](https://i.imgur.com/SZwnjVi.png)
> - 若是 props 傳入值的型別，與設定不同，雖然仍可使用，但會跳出警告，以方便開發時 debug。

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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

![](https://i.imgur.com/vftL5i0.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>
  `,
});

https://codepen.io/jmimiding4104/pen/PoLPjdb
 
額外挑戰：
https://codepen.io/jmimiding4104/pen/xxBwrae?editors=1111

模板與解答皆有使用 Bootstrap5(於 Setting 中引入)，
所以如果想要畫面呈現是相同的要記得載入 Bootstrap5 的 CDN。
-->




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/bGZXJqY) | 
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/qBvewPE) |
| py | [CodePen](https://codepen.io/Wpypy/pen/NWJQVKO) | 
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/oNVKOrY) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/KKEOLmO) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/VwRoOyQ?editors=1011) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/KKEOjLy) |
| Eden |[Codepen](https://codepen.io/iseden/pen/wvOVLEW)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/NWmKWjx?editors=1010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/MWRgYwX) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/dyLbPLO?editors=1010)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/wvZwKQW?editors=1010) | 
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/dyLbGbx) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/QWPLaMa) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/yLrBxjx)
| Uli | [CodePen](https://codepen.io/uli1313/pen/wvZvMaW?editors=1010) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/gOyOwNW) | 
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/zYXYEOV) | 
| Ariel| [CodePen](https://codepen.io/ariel0510/pen/ExJaNMP?editors=1010) |
| Iris| [CodePen](https://codepen.io/iris831206/pen/dyLPdwN) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/qBwdgRG) | 
| runweiting | [CodePen](https://codepen.io/weiting14/pen/NWmxJqv) | 
| yuan! | [CodePen](https://codepen.io/townyuan/pen/poBbJBP) | 


<!-- 
| user | [CodePen]() | 
-->