vue3 内置组件＜Teleport＞

官方文档：
Teleport
内置组件<Teleport>

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

<Teleport>组件的参数说明：

• 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>包裹的内容将在组件自身的挂载点渲染，而不是移动到目标容器中。
  • 示例：

<Teleport to="#modal-container" :disabled="isDisabled">
 <!-- 传送的内容 -->
</Teleport>

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

<Teleport defer to="#late-div">
 <!-- 传送的内容 -->
</Teleport>

<!-- 稍后出现于模板中的某处 -->
<div id="late-div"></div>