共计 1873 个字符，预计需要花费 5 分钟才能阅读完成。
咱们先看一段代码，性能很简略，模板里有一个按钮，点击按钮，展现一个模态窗口。
const app = Vue.createApp({data() {
return {show: false,};
},
methods: {handleShowModal() {this.show = true;},
},
template: `
<div class="box" id="box">
<button @click="handleShowModal"> 显示模态窗口 </button>
<div class="modal" v-if="show"> 模态窗口 </div>
</div>
`
}模态窗口款式如下：
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: cadetblue;
}
.modal {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}整个模态窗口呈相对定位，left、right、top、bottom 全副给 0，背景色为彩色半透明。咱们冀望的成果，应该点击按钮，模态窗口笼罩整个页面。
当初咱们来运行下，咱们会发现，其实模态窗口只笼罩了 #box 元素，因为 #box 自身就是相对定位，模态窗口元素是他的子节点，所以模态窗口只笼罩了 #box 元素。
如果在没有学习 teleport 之前，咱们会在根节点定义一个模态窗口，在业务组件里去做调用。然而这样的话，组件与模态窗口的逻辑就会产生割裂感。那有没有什么办法，能够让我模态窗口就写在这个组件内，但真正出现在页面时，能够动静插入到 <body> 元素上的，其实是有的，咱们只有简略的批改下 template 模板，就能够实现这个要求了。
template: `
<div class="box">
<button @click="handleShowModal"> 显示模态窗口 </button>
<teleport to="body">
<div class="modal"> 模态窗口 </div>
</teleport>
</div>
`咱们用 teleport 元素将 modal 包裹起来，并定义属性 to="body"，运行页面，咱们查看 dom 节点，就会发现 modal 元素曾经追加到 body 底部了，成果如下。
--body
--#root vue 根节点
--.modal 模态窗口传送到其余地位
如果咱们想将 modal 节点传送到其余地位，也能够这么做。
<teleport to="#app">
<div class="modal"> 模态窗口 </div>
</teleport> 这段代码就是将 modal 元素追加到 id=app 的元素内，有一点须要留神，我始终说的是 追加元素，如果说，原来 #app 外部曾经存在其余节点，那么 modal 元素将追加到这些节点之后，有趣味能够本人试一下。
与组件一起应用
其实应用在组件上和一般的 dom 元素并没有什么区别，组件中的节点将被渲染到指定的 dom 节点中（body 或者指定 ID）
const app = Vue.createApp({
...
template: `
<div class="box" id="box">
<button @click="handleShowModal"> 显示模态窗口 </button>
<teleport to="body">
<child-component :name="name"/>
</teleport>
</div>
`
}
app.component('child-component',{props:['name']
template: `<div class='modal'>{{name}}</div>`
})即便被渲染到不同的节点，它仍和一般子组件一样，接管父组件传输的数据，并没有因为渲染节点扭转而扭转。
对同一指标应用多个 teleport
<teleport to="#modals">
<div>A</div>
</teleport>
<teleport to="#modals">
<div>B</div>
</teleport>后果如下：
-- #modal
-- A
-- B所以下面我始终强调，应用 teleport 是将包裹元素追加到指定节点，所以下面两个 teleport 将顺次追加到 #modal 上。
总结
teleport 多利用于逻辑属于该组件，而从技术角度讲，却要把它挪动到其余节点（body 或者指定 ID 的元素）里。最常见的场景就是创立一个蕴含全屏模式的组件，逻辑存在于组件内，然而基于 css 款式，却要把他挪动到 body 元素上。
