> 在vue3中可以通过`teleport`这个内置组件将我们封装的组件渲染到指定的元素中，比如渲染到`body`中，这非常适用于一些弹窗组件。
使用`<teleport>`，告诉 Vue “将这个 HTML**传送**到‘**body**’标签下”。
~~~
app.component('modal-button', {
template: `
<button @click="modalOpen = true">
Open full screen modal! (With teleport!)
</button>
<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
I'm a teleported modal!
(My parent is "body")
<button @click="modalOpen = false">
Close
</button>
</div>
</div>
</teleport>
`,
data() {
return {
modalOpen: false
}
}
})
~~~
一旦我们单击按钮打开模态框，Vue 将正确地将模态框内容渲染为`body`标签的子级。
