<Teleport> 传送到其他 DOM 位置

最后更新：2026-10-22

把内容渲染到页面其他位置（如 body），解决弹窗、下拉菜单被父容器 overflow 裁剪或层级受限的问题。

📝 语法

<Teleport to="body">
  <div class="modal">弹窗内容</div>
</Teleport>

props	to（CSS 选择器或元素）/ disabled（禁用传送）

修改下面的代码，在预览区实时查看效果：

输出：

点按钮后弹窗挂在 body 下（不再受 #app 容器约束）。

ℹ️ 说明 逻辑上仍是组件的子节点：props、事件、provide/inject 关系都不变。

💡 提示 优先传送到 body 或专门的层级容器，避免被父级 overflow/z-index 干扰。

ℹ️ 说明 多个 Teleport 的目标顺序可用 v-if 控制；disabled 可临时原地渲染。

更多案例即将上线。

Q 为什么弹窗会被裁剪？

A 父容器有 overflow:hidden 或 transform 创建了新的层级上下文；传送到 body 可绕开。

Q 事件还会冒泡到组件树吗？

A DOM 事件按真实 DOM 冒泡，但 Vue 组件事件/响应式关系不变。

Q 能传到指定容器吗？

A 可以：to="#modal-root"，先确保目标元素存在。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。