---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 40 - HTML 及 components 的片段練習（具名視圖）

觀看課程影音「一個元件插入多個視圖 - 具名視圖」後，練習下方題目。

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

> HTML 及 components 的片段練習（具名視圖）
> - 參考課程教學，在 components 中對 topComponent 、downComponent 做出相關設定。
> - 讓畫面能夠呈現上方元件、下方元件，實際狀況如圖：
> 
>
> - 提示: topComponent 、 downComponent 需指向 router-view 中的 top 以及 down 。

## 回報流程

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


<!-- 解答：

const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes: [
{
path: '/',
components: {
top: topComponent,
down: downComponent,
}
},
]
})
app.use(router);
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/qBvGePq?editors=1010) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/NWJVQMo) |
| py | [CodePen](https://codepen.io/Wpypy/pen/QWoReBP) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/MWxMgYy) |
| Wei_Rio |[CodePen](https://codepen.io/wei_wu/pen/NWJZKqQ?editors=1010)|
| XinYu |[CodePen](https://codepen.io/HsuXinYu/pen/BabgBbo?editors=1010)|
| RayRay |[CodePen](https://codepen.io/CityRay/pen/GRebKbR)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/xxBoxrB)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/YzgoXPL?editors=1010) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/KKEjpaV) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/NWJZNPZ?editors=1010) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/oNVrwWr) |
|Edne|[Codepen](https://codepen.io/iseden/pen/qBvzxpo)|
| 熊大 | [CodePen](https://hackmd.io/gl3Wx-8fQMu4rlFIPnT2BQ) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/gOEVYbj) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/KKYPQVJ) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/OJGLvZP) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/GRLKXOj)
| 貢波波夫 |[CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/VwNwaEM)
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/rNbaWZB?editors=1010) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/YzMXdpJ) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/BaEjMwo) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/PogzqVw) |

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