介绍

Teleport Vue 3.0新特性之一。

Teleport 是一种能够将我们的模板渲染至指定 DOM 节点，不受父级 style、v-show 等属性影响，但 data、prop 数据依旧能够共用的技术；类似于 React 的 Portal。

主要解决的问题 因为 Teleport 节点挂载在其他指定的 DOM 节点下，完全不受父级 style 样式影响

使用方法

通过 to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置，to 传有效的 CSS 选择器

<Teleport to="body">
  <Loading></Loading>
</Teleport>

也可以自定义传送位置 支持 class id 等 选择器

<div id="app"></div>
<div class="modal"></div>

<Teleport to=".app">
   <Loading></Loading>
</Teleport>
<Teleport to=".modal">
   <Loading></Loading>
</Teleport>

动态控制 teleport

使用 disabled 设置为 true 则 to 属性不生效, false 则生效

<teleport :disabled="true" to='body'>
  <A></A>
</teleport>