Vue 3.0 中 Teleport使用示例詳解

更新時間：2025年05月21日 15:17:10 作者：aiguangyuan

Teleport的主要用途是將某些DOM元素渲染到Vue應用之外的DOM 節(jié)點中,這在處理模態(tài)框、通知、加載提示等需要突破當前組件DOM層級的場景時特別有用,本文給大家介紹Vue 3.0 中 Teleport的相關知識,感興趣的朋友一起看看吧

1. 基本概念

Teleport 的主要用途是將某些 DOM 元素渲染到 Vue 應用之外的 DOM 節(jié)點中，這在處理模態(tài)框、通知、加載提示等需要突破當前組件 DOM 層級的場景時特別有用。

2. 基本語法

<teleport to="目標選擇器">
  <!-- 要傳送的內(nèi)容 -->
</teleport>

3. 使用示例

3.1. 基本使用

<template>
  <div>
    <button @click="showModal = true">打開模態(tài)框</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          這是一個模態(tài)框
          <button @click="showModal = false">關閉</button>
        </div>
      </div>
    </teleport>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const showModal = ref(false);
</script>
<style>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}
</style>

3.2. 傳送到特定元素

<template>
  <div>
    <div id="teleport-target"></div>
    <teleport to="#teleport-target">
      <p>這段內(nèi)容會被傳送到上面的div中</p>
    </teleport>
  </div>
</template>
<script setup>
// 不需要響應式數(shù)據(jù)時，setup 語法糖可以完全省略 script 內(nèi)容
</script>

4. 高級用法

4.1. 與組件一起使用

Teleport 可以包含任何 Vue 模板內(nèi)容，包括組件：

<template>
  <div>
    <teleport to="#modal-container">
      <MyModalComponent v-if="showModal" @close="showModal = false" />
    </teleport>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import MyModalComponent from './MyModalComponent.vue';
const showModal = ref(false);
</script>

4.2. 禁用 Teleport

可以通過動態(tài)綁定 disabled 屬性來禁用 Teleport：

<template>
  <div>
    <teleport to="#modal-container" :disabled="shouldDisable">
      <!-- 內(nèi)容 -->
    </teleport>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const shouldDisable = ref(false);
</script>

當 shouldDisable 為 true 時，內(nèi)容不會被傳送，而是在原地渲染。

4.3. 多個 Teleport 到同一目標

多個 Teleport 可以傳送到同一個目標元素，它們會按照在源代碼中的順序追加到目標中：

<template>
  <div>
    <teleport to="#target">
      <div>A</div>
    </teleport>
    <teleport to="#target">
      <div>B</div>
    </teleport>
    <!-- 結果會是 A 在 B 前面 -->
  </div>
</template>
<script setup>
// 不需要額外的邏輯
</script>