---
# System prepended metadata

title: "\U0001F3C5 6/23 (三) 每日任務 Day 43"
tags: [Vue 直播班 - 2021 夏季班]

---

# 🏅 6/23 (三) 每日任務 Day 43
###### tags: `Vue 直播班 - 2021 夏季班`

題目 (請將答案貼上 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-2021/lectures/31863228

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

![](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>
        `,
  });
 
-->

回報區
---

<!-- 1: Alysa Chan
codepen: https://codepen.io/alysachan/pen/RwpzPbV
-->

<!-- 2: Lina Chen
codepen: https://codepen.io/LinaChen/pen/jOBjPOe
-->
<!-- 3: 陳sam
odepen: https://codepen.io/euldpliv/pen/WNpqvNK
-->
<!--4: yijun
codepen:
https://codepen.io/sandy3068/pen/KKWjpmY
-->
<!--5: LiShang
codepen:
https://codepen.io/li-shang/pen/dyvBobp
-->

<!-- 6: Vic
codepen:https://codepen.io/hsuan333/pen/zYZVGaB
-->

<!-- 7: RitaHuang
https://codepen.io/Rita-Rossweisse/pen/qBrzOYM
-->

<!-- 8: harold 
codepen: https://codepen.io/li-shang/pen/dyvBobp
-->

<!-- 9: Joe Kuo 
codepen: https://codepen.io/alertislow/pen/qBrzbGO?editors=1010
-->

<!-- 10: Yi Chieh
Codepen: https://codepen.io/Yi-Chieh/pen/qBrzbvd
-->

<!-- 11: Jay
codepen: https://codepen.io/jayredk/pen/PoprbWR
 -->

<!-- 12: peter.chen1024
codepen: https://codepen.io/JIAN-RONG/pen/VwpJWVg?editors=1010
-->

<!-- 13: Wendy Li
codepen: https://codepen.io/rockayumitw/pen/qBrzPOb?editors=1010
-->

<!-- 14: youting 
codepen: https://codepen.io/youtingluo/pen/LYWKMNa?editors=1010
-->

<!-- 15: Tori
codepen: https://codepen.io/hayen/pen/xxqmVNo?editors=1000
-->

<!-- 16: leolee
codepen: https://codepen.io/nekorice/pen/jOBjwdy
-->

<!-- 17: Erica
https://codepen.io/ericadu/pen/QWpeOaW
-->

<!-- 18: YOYO
codepen: https://codepen.io/lumedkle/pen/NWjKPXR
-->

<!-- 19: Larry
codepen: https://codepen.io/manpower0708/pen/WNjewZz
-->


<!-- 20: jimmyFang
codepen: https://codepen.io/pohxiqqo/pen/wvdBwdo?editors=1010
-->

<!-- 21: Chiang
codepen: https://codepen.io/ChiangJ/pen/ZEKYdJw?editors=1010
-->

<!-- 22: Oober
codepen: https://codepen.io/xtsjrjdv/pen/mdmJGYQ
-->

<!-- 23: twoz
codepen: 
https://codepen.io/twoz/pen/QWvNbXj?editors=1010
-->

<!-- 24: Stacey Huang
https://codepen.io/staceyhuang/pen/ZEKebVE
-->