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

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

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

> Teleport 傳送功能
> - 改寫 home 元件中的 template，讓畫面中 小明、小華、小王，皆能顯示在 小明家： 、小華家： 、小王家： 後方。
> - 提示： 只能更改 home 元件中的 template，每個 div 標籤都會**改為** Teleport 方法
> - 實際狀況如圖：
> 

## 回報流程

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


<!-- 解答：

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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/qBMZqvY)|
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/qBMZqgY)|
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/VwGamNE)|
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/eYLZgOE?editors=1010)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/JjaXEPZ) |
|ㄚ翔#8126|[CodePen](https://codepen.io/engineerjohnson/pen/ZEMWLYy)|
|薯餅#3581|[CodePen](https://codepen.io/ColdingPoTaTo/pen/MWqyJyv)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/RwYaKWm?editors=1010)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/xxaVgga)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/YzOybNJ)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/YzOqNEm)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/OJoNWZX)|
|mandylai#4055|[CodePen](https://codepen.io/mandy-lai-2/pen/qBMZRKw?editors=1011)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/NWLNpzB)|
|jacky010080#0880|[Codepen](https://codepen.io/Yen-Jung-Chen/pen/xxaVqQV?editors=1010)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/LYJNyPW)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/eYLZWvZ?editors=1010)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/eYLZWWZ)|
|Hilda#7085|[codepen](https://codepen.io/vwquikad-the-vuer/pen/GRXZmMYhttps://codepen.io/vwquikad-the-vuer/pen/GRXZmMY)|
|LinaChen#1796|[codepen](https://codepen.io/LinaChen/pen/YzOqNXg)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/ExeKXbe?editors=1010)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/oNPxwMr)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/MWqyvbz?editors=1010)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/xxaVLXb)
|楊苡安#2752|[Codepen](https://codepen.io/yi-an-yang/pen/oNPxoga)
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/wvEGpzr?editors=1010)
| azami#5986 |[CodePen](https://codepen.io/azami/pen/NWLNMrX)|
| hannahTW#2224 |[CodePen](https://codepen.io/hangineer/pen/ExeKLNB?editors=1010)|
| christina#6185 |[Codepen](https://codepen.io/chrisc0210/pen/yLxOmjG)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/KKxMKLy)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/MWqeYVZ)|
| albee#9121|[Codepen](https://codepen.io/albee-chang/pen/eYLZBXW?editors=1111)|
|Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/qBMNPLP)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/JjaKQea?editors=1010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/KKxgKJW)|
|柚子 #3958|[Codepen](https://codepen.io/as6625998/pen/JjaRgPB?editors=1011)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/ExeKZZR)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/gOdRGeO)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/RwegoVG)|