Teleport

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

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属性中。