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

<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">關(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>

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

<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>

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

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