---
# System prepended metadata

title: Vue學習#22 teleport 自定義元件位置
tags: [Vue 直播班 - 2022 春季班]

---

# Vue學習#22 teleport 自定義元件位置
###### tags: `Vue 直播班 - 2022 春季班`

## 什麼是 teleport
透過 `teleport` 可以將標籤內容傳送到你想要的位置

## 使用方法

### 在要傳送特定位置的標籤外面加上 `<teleport to='某位置的id'> </teleport>`

此圖為一個元件的 `template` 使用 `teleport` 把標籤包起來，並指定要把這個內容放到 id=teleportAfter 的 div 區塊
![](https://i.imgur.com/Sp9ZZMW.png)

### [teleport 簡單範例](https://github.com/Danny-1211/VUE-review/tree/main/teleport)