vue3 内置组件＜Teleport＞

官方文档：
Teleport
内置组件

将一个组件的模板内容渲染到指定的 DOM 节点位置，而不是在组件自身的挂载点。

组件的参数说明：

• to：必填项。指定目标容器。可以是选择器或实际元素。
  • 类型：string | HTMLElement
  • 作用：指定要将内容传送（teleport）到的目标位置。可以是一个 CSS 选择器字符串，用于选择一个现存的 DOM 元素，也可以是一个实际的 DOM 元素对象引用。
  • 示例：

<Teleport to="#modal-container">Teleport>
<Teleport to="#some-id">Teleport>
<Teleport to=".some-class">Teleport>
<Teleport to="[data-teleport]">Teleport>

• disabled：可选参数。
  • 类型：boolean。默认值为false。可以动态更改。
  • 作用：当设置为true时，包裹的内容将在组件自身的挂载点渲染，而不是移动到目标容器中。
  • 示例：

<Teleport to="#modal-container" :disabled="isDisabled">
 
Teleport>

• defer：可选参数。
  • 类型：boolean。默认值为false。
  • 作用：当设置为true时，包裹的内容 将推迟解析，直到应用的其他部分挂载后，再解析其目标。
  • 示例：

<Teleport defer to="#late-div">
 
Teleport>


<div id="late-div">div>