---
# System prepended metadata

title: "\U0001F3C5 Day 43"
tags: [Vue 直播班 - 2022 春季班]

---

---
tags: Vue 直播班 - 2022 春季班
---

# 🏅 Day 43
###### tags: `Vue 直播班 - 2022 春季班`

題目 (請將答案貼上 CodePen)
---
操作 [這個模板](https://codepen.io/rider159159/pen/yLMQjgO)，執行以下要求 (只能操作 JS 的部分):

> Teleport 傳送功能
> - 改寫 home 元件中的 template，讓畫面中 小明、小華、小王，皆能顯示在 小明家: 、小華家: 、小王家: 後方。
> - 提示: 只能更改 home 元件中的 template，每個 div 標籤都會**改為** Teleport 方法
> - 實際狀況如圖:
> ![](https://i.imgur.com/IUdxtvq.png)


 參考: https://courses.hexschool.com/courses/vue-20212/lectures/35988940

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

![](https://i.imgur.com/QtL8zEW.png)

回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)

![](https://i.imgur.com/L7kyew8.png)

<!-- 解答

   app.component('home', {
    template:
      `
       <teleport to=".minHome">小明</teleport>
       <teleport to="#huaHome">小華</teleport>
       <teleport to="span">小王</teleport>
        `,
  });
 
-->

回報區
---
| 報數 |組別/名字  | codepen / 其他回饋    | 
|:--------:| -------- | -------- | 
| 1 | Bruno Yu | https://codepen.io/bruno-yu/pen/bGYQmbG |
| 2 | CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/LYOXJom |
| 3 | Larry | https://codepen.io/larrylinr5/pen/PoOxyGY?editors=1010 |
| 4 | Iris Huang | https://codepen.io/ythuang/pen/ExbOdNE |
| 5 | 黃士桓 | https://codepen.io/shr-huan-huang/pen/dyZQgWa |
| 6 | 肉鬆 | https://codepen.io/klrkicog/pen/LYOXgWg?editors=1010 |
| 6 | EmptyWu | https://codepen.io/emptywu/pen/GROwYXJ |
| 7 | Pei Ying | https://codepen.io/Pei-Ying/pen/OJOaBKb?editors=1010 |
| 8 | Jason Chen | https://codepen.io/jason60810/pen/MWOzzgX |
| 9 | Gill | https://codepen.io/Gill-Chin/pen/ExbOOVM?editors=1010 |
|10| Sheep | https://codepen.io/SheepNDW/pen/xxPQyxY |
| 11 | Wenfish | https://codepen.io/wenfisht/pen/rNYQQGb |
| 12 | 威爾 | https://codepen.io/WILL_Wu/pen/gOXQQWm |
|13|kk|https://codepen.io/potatokaka/pen/mdqQadp?editors=1010|
| 14 | Yunei | https://codepen.io/Yunei/pen/qBVQLrm |
| 15 | Arista | https://codepen.io/arista-hsieh/pen/NWwEezZ |
| 16 |Rick Tzeng|https://codepen.io/rick917jp6/pen/JjOezBd |
|17|陳暐中|https://codepen.io/wei-z/pen/wvPQZRL?editors=1010|
|18|sally|https://codepen.io/intelligence753/pen/rNYQErg?editors=1010|
|19|Charlotte Lee|https://codepen.io/charlotte-lee/pen/bGYQPyj?editors=1010 
|20|shio|https://codepen.io/shioyen/pen/MWOZWgG |
|21|Karen Huang|https://codepen.io/Coding_Snorlax/pen/gOXZOWg?editors=1010|
|22|Tim Lin|https://codepen.io/TimmyLin/pen/PoOXoBJ|
|23|Henry Wu | https://codepen.io/dkcmlaww-the-flexboxer/pen/QWOzjqm |
|24|andersonshen| https://codepen.io/luxyenni-the-bold/pen/XWzoXZK |
| 25 | YC | https://codepen.io/YCLu/pen/qBVLpMj |
| 26 | 我是泇吟 | https://codepen.io/kljuqbxs/pen/GROPPLX |
| 27 | 咖咖 | https://codepen.io/gon790219/pen/oNoJOXL |
| 28 | Bonnie | https://codepen.io/bonnieli1414/pen/xxPmeEZ?editors=1010 |
| 29 | Jasper | https://codepen.io/li-jasper/pen/WNXmepV |
| 30 | ZY Hsu | https://codepen.io/zihyin/pen/rNYRNpK?editors=1010 |
| 31 | mei | https://codepen.io/Shila-Chen/pen/rNYRYpd |
|32| Otis |https://codepen.io/humming74/pen/wvPOpae?editors=1010|
|33| Judy☻ |https://codepen.io/hsiaohan/pen/MWORKMR?editors=1010|
|34| 紙飛機 | https://codepen.io/paperplanea/pen/BaJaKQj?editors=1010 |
| 35 | sihle | https://codepen.io/bugbug777/pen/dyJyWoQ |
|36|Gui|https://codepen.io/guitimliu/pen/WNdmogE
|37|JD孟璁|https://codepen.io/oikdkmxq-the-looper/pen/JjpPyBg?editors=1010 |