---
# System prepended metadata

title: "\U0001F3C5 6/22 (二) 每日任務 Day 42"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 6/22 (二) 每日任務 Day 42
###### tags: `Vue 直播班 - 2021 夏季班`

題目 (請將答案貼上 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-2021/lectures/31863230

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

![](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>
        `,
  });
 
-->

回報區
---
<!--Alpha
Codepen:https://codepen.io/alphatero/pen/YzZbVpE
-->

<!--2:Lina Chen
CodePen:https://codepen.io/LinaChen/pen/BaWeRpq
-->

<!--3:Vic
CodePen:https://codepen.io/hsuan333/pen/eYvaWGJ
-->

<!--4: RitaHuang
https://codepen.io/Rita-Rossweisse/pen/PopvmWB?editors=1010
-->
<!--5: 陳sam
https://codepen.io/euldpliv/pen/abJrWjW
-->

<!-- 6: Alysa Chan
codepen: https://codepen.io/alysachan/pen/ExWzmBv?editors=1111
-->

<!-- 7: leo lee
codepen: https://codepen.io/nekorice/pen/JjWqJjp
-->

<!-- 8: Tori
codepen: https://codepen.io/hayen/pen/xxqmVNo?editors=1000
-->

<!-- 9: 小魚
codepen: https://codepen.io/jarvis1993/pen/QWpRgRg
-->

<!-- 10: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/zYZQdZb
-->

<!-- 11: Joe Kuo
Codepen: https://codepen.io/alertislow/pen/KKWLXKE?editors=0010
-->

<!--12: yijun
codepen:
https://codepen.io/sandy3068/pen/xxqNWLz
-->

<!--13: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/XWMwEvP?editors=1011
-->

14: Jay
codepen: https://codepen.io/jayredk/pen/PopvavL

<!-- 15: Jack
https://codepen.io/yxzzktmb/pen/dyvEwXb?editors=1010
-->

<!-- 16: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/BaWgdBK?editors=1010
-->

<!-- 17: Erica
https://codepen.io/ericadu/pen/vYxoedm
-->

<!-- 18: YOYO
https://codepen.io/lumedkle/pen/ZEKzYyX?editors=0010
-->

<!-- 19: Larry
https://codepen.io/manpower0708/pen/zYwOqwQ
-->

<!-- 20: jimmyFang
https://codepen.io/pohxiqqo/pen/XWRJrjY?editors=1010
-->

<!-- 21: Chiang
https://codepen.io/ChiangJ/pen/KKmwjNe?editors=1010
-->

<!-- 22: Oober
https://codepen.io/xtsjrjdv/pen/JjNdaVr?editors=1111
-->

<!-- 23: twoz
https://codepen.io/twoz/pen/wvdGaYL?editors=1011
-->

<!--24: Stacey Huang
https://codepen.io/staceyhuang/pen/dyWvYgR
-->