Teleport 组件核心作用是将模态框 DOM 节点移至 body 或指定容器，规避父级 overflow、transform 和 z-index 限制；状态与逻辑仍归属原组件；推荐使用显式容器如 #modal-root；可配合 Transition 实现稳定动画。
Teleport 组件在模态框开发中最核心的作用，是把模态框的 DOM 节点“搬出”当前组件层级，直接挂载到 body 或其他指定容器中，从而绕开父级样式限制（比如 overflow: hidden、transform、z-index 层叠上下文）带来的布局和遮挡问题。
解决父组件样式干扰
当模态框嵌套在深层组件中时，常因父容器设置了 overflow: hidden 或 position: relative 导致弹窗被裁剪、定位错乱或无法全屏覆盖。Teleport 把模态框内容移出该 DOM 上下文后，它就只受全局 CSS 和 body 布局影响，样式编写更直观可靠。
- 避免因父级
transform创建新的层叠上下文，导致z-index失效 - 不再被
overflow: hidden截断，确保遮罩层和内容完整显示 - 可直接使用
position: fixed实现视口居中，无需额外计算偏移
保持逻辑归属与状态统一
模态框的显隐状态、数据、事件处理仍完全属于原组件——按钮和弹窗写在同一个 <template></template> 里，用同一个 ref 控制开关，无需跨组件通信或全局状态管理。
-
showModal是本地响应式变量，@click事件直接修改它 - 关闭按钮仍能触发同一作用域内的函数，如
closeModal() - 插槽、props、v-model 等能力照常工作，不破坏组件封装性
目标容器推荐写法
生产环境中建议显式定义一个空容器作为传送目标，而非直接用 to="body"——这样更可控，也便于后续做 SSR 兼容或动态挂载策略。
立即学习“前端免费学习笔记（深入）”；
- 在
public/index.html的内添加：<div id="modal-root"></div> - 组件中使用：
<teleport to="#modal-root">...</teleport> - 支持动态目标，例如：
<teleport :to="isMobile ? '#mobile-overlay' : '#modal-root'"></teleport>
配合 Transition 实现平滑动画
Teleport 不影响 Vue 的过渡系统，模态框的进入/退出动画可直接用 <transition></transition> 包裹，且因脱离层级后 DOM 更干净，动画表现更稳定。
- 将
<transition></transition>放在<teleport></teleport>外层或内层均可，推荐包在外层统一控制 - 使用
appear属性可让首次渲染也触发动画 - 注意：若用
v-if控制显隐，需确保<transition></transition>的mode设置合理（如out-in防止闪烁）
