Vue3内置组件Teleport

---

前言

在 Vue 3 中， 是一个内置组件，用于将模板的一部分内容渲染到 DOM 中的其他位置，而不是当前组件的默认挂载点。这对于实现模态框、通知、工具提示等需要脱离父组件层级进行渲染的场景非常有用。

一、Teleport是什么？

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

为啥会有这个组件

当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：
position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点

设置动画，就会不小心破坏模态框的布局！
图解：
我们可以看见模态框居中了，这就是使用了这个组件的效果


没有用这个组件，发现居中失效了

二、使用步骤

包裹一下用这个组件就行了
代码如下（示例）：

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

---

总结

通过 ，你可以更灵活地控制组件的渲染位置，提升用户体验和代码的可维护性。