Teleport Vue 3.0新特性之一

Teleport Vue 3.0新特性之一

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

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

（1）挂载的目标必须位于组件树外部的某个位置，不能挂载到本组件树上。

（2） 挂载的dom必须是创建好的dom，不能是未挂载的。掉坑里面半天才爬出来

使用方法
通过to 属性 插入指定元素位置 to=“body” 便可以将Teleport 内容传送到指定位置

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

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

<!-- ok -->
<teleport to="#some-id" /> id选择器
<teleport to=".some-class" /> class选择器
<teleport to="[data-teleport]" />
 
<!-- Wrong -->
<teleport to="h1" />
<teleport to="some-string" />

动态控制传送disabled属性

    <teleport :disabled="true" to='body'>
      <A></A>
    </teleport>
   // 使用disabled 设置为 true则 to属性不生效  false 则生效