摘要

<Teleport> 是一個內建元件，它能將其包裹的內容，「傳送」到當前元件 DOM 結構之外的另一個指定位置進行渲染。

定義與說明

<Teleport> 接收一個 to 屬性，其值可以是一個 CSS 選擇器字串或一個真實的 DOM 節點。它包裹的內容將被渲染為該目標節點的子元素。這對於處理需要脫離父元件 CSS 限制的 UI（如模態框、提示框、下拉選單）非常有用。

實作範例

Vue SFC

<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>

<template>
  <button @click="showModal = true">顯示模態框</button>
  <!-- 這段內容的 HTML 結構會被渲染到 <body> 標籤下 -->
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <p>這是一個模態框！</p>
      <button @click="showModal = false">關閉</button>
    </div>
  </Teleport>
</template>

結論

<Teleport> 以一種乾淨、宣告式的方式，優雅地解決了長期困擾前端的 z-index 和 overflow 樣式問題，讓建構彈出式 UI 變得前所未有的簡單。

Teleport 模態框 DOM 操作