要解决的问题

为了让组件能在所有dom元素的最顶层出现，覆盖其他组件。这是常见的业务场景，比如弹窗。

Teleport组件的作用

Vue.js 3 内建了 Teleport 组件。该组件可以将指定内容渲染到特定容器中，而不受 DOM 层级的限制。

api说明

interface TeleportProps {
  /**
   * 必填项。指定目标容器。
   * 可以是选择器或实际元素。
   */
  to: string | HTMLElement
  /**
   * 当值为 `true` 时，内容将保留在其原始位置
   * 而不是移动到目标容器中。
   * 可以动态更改。
   */
  disabled?: boolean
}

测试代码

<teleport to="#some-id" >1</teleport>
<teleport to=".some-class" >2</teleport>
<teleport to="[data-teleport]" >3</teleport>