Vue3 – Teleport 组件

简介

Teleport 是Vue3 新推出的一种组件功能，它可以使任意Dom元素传送到页面中的任意位置。

Teleport 定义

使用 <teleport to="xxx"></teleport>  标签包裹的元素，可以把包裹的元素传送到指定的位置。

<template>
  <div>
    <teleport to="body">
      <div>
        这里的内容将会被传送到 body 标签中
      </div>
    </teleport>
    
    <teleport to="#app">
      <div>
        这里的内容将会被传送到 id为 app 的标签中
      </div>
    </teleport>
  </div>
</template>

teleport 可以让一些子组件中的DOM元素，随意传送到其它组件，甚至传到根标签位置中。

如一些全屏弹框，可以使用teleport 把子组件中定义的弹框元素传到根标签中展示。