Vue Teleport — 把内容传送到body
用Teleport将弹窗/通知渲染到指定DOM位置，解决fixed定位被父元素裁剪的问题 · 难度：进阶 · +15XP
Teleport 解决什么问题？
想象一个模态弹窗（Modal）：它需要覆盖整个页面，用 position: fixed; z-index: 9999 来实现。
但如果弹窗所在父元素有 overflow: hidden 或 transform，fixed定位会失效——弹窗被裁剪或位置错误。
<Teleport> 解决了这个问题：把弹窗的HTML传送到 <body> 下面渲染，脱离父元素的限制，但逻辑上仍然属于当前组件（数据、方法都还能访问）。
基本用法
<Teleport to="body">
<div v-if="show" class="modal">
<p>这个弹窗虽然写在组件里，但会被渲染到body下</p>
<button @click="show=false">关闭</button>
</div>
</Teleport>to 属性接收CSS选择器，指定传送目标。常用 to="body" 或 to="#modal-container"。还可以用 :disabled 条件禁用。
常见使用场景
| 场景 | 传送到 |
|---|---|
| 模态弹窗 | body |
| 全局通知Toast | body |
| 下拉菜单 | body |
| 全屏Loading | body |
动手试试
右边弹窗通过Teleport渲染到body下。打开开发者工具查看DOM——弹窗在</body>之前。