简介

<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去；也就是你可以把指定的内容传送到指定的位置

使用

<Teleport>接收一个 to 属性 值可以为选择器、id 类名、标签名

<template>
  <Teleport to="body">
    <!--> 弹窗将会插入到body下 <--!>
    <el-dialog></el-dialog>
  </Teleport> 
</template>

此外，<Teleport>通过diabled控制to属性的启用还是失效， 值为 true 或 false

<teleport :disabled="true" to='body'>
  <el-dialog></el-dialog>
</teleport>

多个 Teleport 共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

<Teleport to="#modals">
  <div>A</div>
</Teleport>

<Teleport to="#modals">
  <div>B</div>
</Teleport>

渲染的结果为：

<div id="modals">
  <div>A</div>
  <div>B</div>
</div>