英文单词teleport是远距离传送的意思。漫威电影复联4中，奇异博士利用魔法，将全球各地的人远距离传送至同一个战场。
Vue 3中的 <Teleport> 组件也能实现同样的魔法效果，它会把组件内的模板片段传送到遥远的其他位置。
基本用法
一个常见的业务场景：在某个子组件中，点击按钮，出现一个全局弹框。
逻辑上，这个弹框受子组件的状态控制，隶属于子组件。但在DOM树结构中，它应该超越子组件，最好是body的直接子元素，否则它很容易受到子组件样式的影响。
下面代码展示了如何在子组件中使用 <Teleport>，把弹框转移到body中。
<button @click="open = true"> Open Modal </button> <Teleport to="body"> <div v-if="open" class="modal"> Modal Content </div> </Teleport>
使用to属性设定转移的目的地，它可以是CSS选择器字符串，也可以是真正的DOM节点。
注意，<Teleport> 组件加载到DOM之前，to属性指定的节点务必已经存在。
不变的组件层级结构
<Teleport> 只会改变最终渲染的DOM结构，它不会对Vue组件树的层级结构产生影响，父子组件之间的属性传递和事件触发保持不变。
禁用 Teleport
有时候需要根据某些条件，动态启用或禁用Teleport，使用它的disabled属性即可。
<Teleport :disabled="isMobile"> ... </Teleport>
多个 Teleport，一个目的地
如果多个 <Teleport> 的to属性指向同一个目的地，没有任何问题。元素会按照先来后到，在目的地元素内依次排列。
