作用：

让vue去传送代码到指定位置

将一个组件的一部分模板“传送”到该组件的 DOM 层次结构之外的 DOM 节点中

实例：

全屏模态框，视频右下角小窗口播放

<div class="relative w-screen h-screen bg-red-400 ">
    <Teleport to="body">
      <div class="fixed top-0 left-0 flex items-center justify-center w-full h-full bg-green-400 box leading-100">
        <div class="w-1/2 shadow-2xl shadow-inner box h-1/2 bg-danger p-30">
          box
        </div>
      </div>
    </Teleport>
 </div>

只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。

禁用

disabled

<Teleport :disabled="isMobile">
  ...
</Teleport>

完！