---
# System prepended metadata

title: "\U0001F3C5 Day 43 - Teleport 傳送功能"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 43 - Teleport 傳送功能

觀看完課程影音「自訂元件生成位置 teleport」後，練習下方題目。

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

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

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

## 回報流程

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

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

<!-- 解答：  

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

https://codepen.io/jmimiding4104/pen/XWGmgOO

額外挑戰：
https://codepen.io/jmimiding4104/pen/oNVjwVg

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




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/qBwWpOw?editors=1010) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/MWRgrjX) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/gOyYoar) |
| py | [CodePen](https://codepen.io/Wpypy/pen/RwObxMG) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/abxoqYB) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/JjVPpmJ) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/ZEZzxrJ) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/GRLKxdV) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/LYvPdBX) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/ExJYGZG) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/XWQrovv) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/jORNdKj)
| Eden |[Codepen](https://codepen.io/iseden/pen/RwObdKE)|
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/VwNwLXz?editors=1010) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/dyLyMGp?editors=1011)|
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/bGJGgGJ?editors=1010) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/BaEawoJ) | 
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/ExJxmrg) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/xxexQbq?editors=1010) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/dyLPNpZ?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/yLryvGr) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/zYXGeEe) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/OJGMqzx) | 
| yuan! | [CodePen](https://codepen.io/townyuan/pen/KKYMpjm) |



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