vue3 Teleport的使用及场景。

Vue 3 中的 Teleport（传送门）是一个非常有用的特性，它允许你在 DOM 树中的任意位置动态地渲染组件。Teleport 实质上是将组件的内容“传送”到指定的目标位置，而不受组件自身所在位置的限制。

Teleport 的使用场景包括但不限于：

1. 模态框（Modal）：你可以使用 Teleport 将模态框的内容渲染到 标签之外，以避免模态框受到父级容器 CSS 样式的影响，并且可以保证在层叠顺序上处于最顶层。

2. 弹出菜单（Dropdown Menu）：通过 Teleport，你可以将弹出菜单的内容渲染到 标签之外，以确保在 z-index 上的正确显示，并且避免被父级容器的 overflow 属性限制。

3. 全局提示（Toasts/Notifications）：你可以使用 Teleport 将全局提示的内容渲染到页面的特定位置，比如右上角，而不受组件所在层级的影响。

4. 滚动组件（Scrollable Components）：有时候你可能希望某个组件的内容在滚动时保持固定位置，这时可以使用 Teleport 将该组件的内容渲染到页面的某个固定位置，而不受滚动容器的影响。

5. 特定容器之外的渲染：有些情况下，你可能需要将组件的内容渲染到与当前组件不相邻的 DOM 结构中，这时可以使用 Teleport 轻松实现。

有时我们可能会遇到这样的场景：一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

这类场景最常见的例子就是全屏的模态框。理想情况下，我们希望触发模态框的按钮和模态框本身是在同一个组件中，因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

试想下面这样的 HTML 结构：

  
Tooltips with Vue 3 Teleport
  

    
  

接下来我们来看看  的实现：

 这个组件中有一个  按钮来触发打开模态框，和一个 class 名为 .modal 的 

，它包含了模态框的内容和一个用来关闭的按钮。

当在初始 HTML 结构中使用这个组件时，会有一些潜在的问题：

• position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点 

   设置动画，就会不小心破坏模态框的布局！

• 这个模态框的 z-index 受限于它的容器元素。如果有其他元素与 

   重叠并有更高的 z-index，则它会覆盖住我们的模态框。

 提供了一个更简单的方式来解决此类问题，让我们不需要再顾虑 DOM 结构的问题。让我们用  改写一下 ：

Open Modal

Hello from the modal!

Close

 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串，也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue“把以下模板片段传送到 body 标签下”。

你可以点击按钮，然后通过浏览器的开发者工具，在  标签下找到模态框元素：

 我们也可以将  和  结合使用来创建一个带动画的模态框

modal.vue

app.vue