--- 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 |