Teleport 是渲染时的 DOM 重定向机制，不依赖组件注册方式；其挂载目标必须预先存在，否则内容被丢弃；支持字符串选择器或 DOM 元素作为 to 值，多个 Teleport 可共用同一目标并自动追加内容。

Vue 组件注册本身不直接涉及 Teleport 的挂载逻辑，Teleport 是一个**渲染时的 DOM 重定向机制**，和组件是否全局/局部注册无关。真正起作用的是：你在哪个组件里用了 Teleport，它的 to 属性指向哪里，以及目标容器是否已存在。

Teleport 的挂载目标必须提前存在

Teleport 不会自动创建目标容器，它只把内容“搬过去”。如果 to 指向的元素在挂载时还不存在，内容将被丢弃（不会报错，但不可见）。

• 推荐在 index.html 的 内静态声明目标节点，比如：
  <div id="modal-root"></div> 或 <div class="teleport-target"></div>
• 避免用 to="#dynamic-id" 指向由 Vue 动态渲染的元素，除非确保该元素先于 Teleport 挂载（例如用 v-if 控制顺序，或放在父组件顶层）

在已注册组件中使用 Teleport

无论组件是通过 app.component() 全局注册，还是 components: { Modal } 局部注册，只要它模板里包含 Teleport，就能生效。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 例如，一个已注册的 Modal 组件内部可这样写：
• <teleport to="#modal-root"><div class="modal">...</div> </teleport>
• 只要 #modal-root 存在，Modal 的 DOM 就会出现在那里，但数据响应、事件（@close）、插槽仍完全由原组件控制

常见 to 值写法与注意事项

to 支持字符串选择器或真实 DOM 元素，二者行为一致：

立即学习“前端免费学习笔记（深入）”；

• to="body"：最常用，弹窗/通知挂到 body 底层，避开父级 overflow 或 transform 干扰
• to=".notification-container"：匹配第一个符合类名的元素
• to="#app"：挂到 Vue 根容器内（较少用，通常为调试或特殊布局）
• :to="targetEl"（绑定 ref）：适合动态目标，需在 onMounted 中赋值，例如：
  const targetEl = ref(document.getElementById('custom-target'))

多个 Teleport 可共用同一目标

多个组件或同一组件多次渲染 Teleport，只要 to 相同，它们的内容会按顺序追加到目标容器中。

• 例如两个 <teleport to="#modal-root"></teleport>，最终 #modal-root 内会包含两段独立 DOM
• 无冲突，也无需手动管理插入位置 —— Vue 自动处理