从官网中获取到的代码如下

App.vue

<template>
  <div class="outer">
    <h3>Tooltips with Vue 3 Teleport</h3>
    <div>
      <MyModal />
    </div>
  </div>
</template>
<script setup>
import MyModal from "./MyModal.vue";
</script>

MyModal.vue中

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

<template setup>
  <div></div>
  <button @click="open = true">Open Modal</button>
  <!-- <Teleport to="body"> -->
  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
  <!-- </Teleport> -->
</template>

<style scoped>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>

将注释取消可以看到他的位置发生了变化

还是不太能理解有啥用，问了下GPT

Vue3中的teleport主要用于将组件插入到DOM中指定的位置，特别适用于在组件外部添加内容或者在组件之外渲染内容。

以下是一些teleport的使用场景：

1. 模态框（Modal）：可以使用teleport将模态框组件的内容插入到body或其他指定的DOM元素中，以确保模态框始终位于页面的顶层。

2. 通知消息（Toast）：使用teleport可以在页面的任何位置插入消息提示组件，无论滚动条位置如何，消息始终可见。

3. 弹出菜单（Dropdown）：teleport可用于在组件外部插入弹出菜单的内容，以便在不同的组件之间共享相同的菜单。

4. portal：通过teleport，可以将组件插入到应用程序之外的DOM节点中，例如在应用程序的根组件之外渲染一些全局的组件，如全局消息提示或开发者工具。

需要注意的是，teleport只适用于具有全局性质的组件，且在使用时需将teleport的目标DOM元素写在teleport标签的to属性中。