快捷導(dǎo)航

Vue 3.0 中 Teleport使用示例詳解

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

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

1. 基本概念

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

2. 基本語(yǔ)法

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

3. 使用示例

3.1. 基本使用

<template>
  <div>
    <button @click="showModal = true">打開(kāi)模態(tài)框</button>
    <teleport to="body">
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          這是一個(gè)模態(tài)框
          <button @click="showModal = false">關(guān)閉</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)容會(huì)被傳送到上面的div中</p>
    </teleport>
  </div>
</template>
<script setup>
// 不需要響應(yīng)式數(shù)據(jù)時(shí)，setup 語(yǔ)法糖可以完全省略 script 內(nèi)容
</script>

4. 高級(jí)用法

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

可以通過(guò)動(dòng)態(tài)綁定 disabled 屬性來(lái)禁用 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>

當(dāng) shouldDisable 為 true 時(shí)，內(nèi)容不會(huì)被傳送，而是在原地渲染。

4.3. 多個(gè) Teleport 到同一目標(biāo)

多個(gè) Teleport 可以傳送到同一個(gè)目標(biāo)元素，它們會(huì)按照在源代碼中的順序追加到目標(biāo)中：

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