vue3学习（七）--- Teleport传送组件

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

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

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

to使用方法

通过to 属性 插入指定元素位置 to="body" 便可以将Teleport 内容传送到指定位置。

<Teleport to="body">
    <Loading>Loading>
Teleport>
1
2
3

使用多个场景

<Teleport to=".modal1">
     <Loading>Loading>
Teleport>
<Teleport to=".modal2">
     <Loading2>Loading2>
Teleport>
1
2
3
4
5
6

1. 可以自定义传送（移动）位置 支持 ele class id等选择器，内部实现用的就是querySelector来查找的。

disabled动态控制teleport

使用disabled 设置为 true 则 to属性不生效， false 则生效。这样就可以动态控制是否要传送了。

    <teleport :disabled="true" to='body'>
      <A>A>
    teleport>
1
2
3