Teleport

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

App.vue

MyModal.vue中

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

还是不太能理解有啥用，问了下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属性中。