在 Vue 中，Teleport是一個特殊的內建元件，從Vue 3開始引入。元件的邏輯關聯性。

這對於一些需要特定 DOM 結構的功能（如模態框、通知、工具提示等）非常有用，因為這些內容通常需要被渲染到body或其他全局容器中。

Teleport的語法

<template>
  <div>
    <h1>主內容</h1>
    <teleport to="body">
      <div class="modal">
        <p>這是一個模態框</p>
      </div>
    </teleport>
  </div>
</template>

<div class="modal">

雖然寫在元件內部，但會被「傳送」到元素body中。

Teleport 的屬性

1. to(簡單)：指定 DOM 節點的選擇器或 DOM 元素，表示 Teleport 的目標位置。

值可以是：

• CSS 選擇器字串（如body, #app）
• DOM 元素（如document.querySelector('#app')）

2. disabled（選擇性）：如果設定為位置true，底部取消 Teleport 的效果，內容將渲染在原始位置。

使用範例

1. 模態框

<template>
  <div>
    <button @click="showModal = true">開啟模態框</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <p>這是一個模態框</p>
        <button @click="showModal = false">關閉</button>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border: 1px solid black;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

在這個例子中，模態框的 DOM 結構被移動到了body下，但它的行為仍然與元件綁定，響應性完全保留。

2. 禁用 Teleport
   當 disabled 屬性為 true 時，內容不會被移動。

<template>
  <div>
    <teleport to="body" :disabled="true">
      <div>這段內容不會被傳送</div>
    </teleport>
  </div>
</template>

使用場景

1. 模態框（Modal）
2. 通知（Notification）
3. 工具提示（Tooltip）
4. 全域性的浮動元素
5. 將內容移動到特定的容器內

注意事項

1. 目標元素的存在：to 指定的 DOM 節點必須存在，否則 Teleport 不會生效。
2. SEO 考量：內容雖然被移動，但仍然在原位置的模板內定義，對於搜索引擎友好。
3. 樣式作用域：如果使用了 scoped 樣式，樣式仍然會應用到 Teleport 的內容。

總結

Teleport 提供了一種方便的方法將 DOM 節點移動到其他位置，適用於需要全域渲染但仍然需要保留組件邏輯關聯的場景。在 Vue 3 中，它是一個非常實用且靈活的工具，可以讓我們更好地管理應用的結構和樣式。