一、背景：为什么需要“传送门”

在 Vue 的组件树中，子组件的 DOM 默认渲染在父组件内部。但有些场景需要把内容渲染到组件树之外的特定位置：

• 模态框 / 对话框
• Toast / 通知 / 全局提示
• 浮层菜单、下拉、Tooltip
• 跨布局区域的内容注入

再看主要需求是。逻辑仍属于原组件，但渲染位置脱离原组件树——这就是简单讲的“传送门”模式。

二、Vue 2方案：portal‑vue 库

Vue 2 官方没有内置传送门，社区标准做法是使用 / 对配合的第三方库。

. 基本用法

. portal‑target 常用配置

. Vue 2 + portal‑vue 的典型痛点

• 1️⃣ 强依赖第三方库：  -体积大且需与 Vue 版本严格匹配，升级成本高。
• 2️⃣ SSR 支持复杂： -服务端渲染时默认不渲染 portal 内容。需要额外配置，易踩坑，
• 3️⃣ 调试困难： -内容定义在 A 树。却渲染在 B 树，父子关系割裂，需要跨树定位。
• 4️⃣ Wrapper 嵌套破坏样式： 
• 5️⃣ 单根限制： 
• 6️⃣ 响应式/重渲染隐式： .

三、Vue 3方案：内置 Teleport

从 Vue 3 开始。Teleport 成为官方内置功能，把传送门整合进框架，解决主要问题了上述痛点，并提供更多高级特性。

基本用法 – 随意移动到任何 CSS selector 或 HTMLElement

<button =="" @click="“open" true”="">打开弹窗 </button>
<teleport :disabled="“isMobile”" to="“body”">
<div =="" @click.self="“open" class="“modal”" false”="" v-if="“open”">
我会被直接渲染到
下
</div>
<teleport>
to 可以是任意 CSS selector，也可以是真实 HTMLElement。不过，css
js
至于**主要**，`Teleport` 自动处理挂载位置。无需显式声明 `target` 节点。<h3>
调整维度对比</h3>
<table border="1" cellpadding="8" cellspacing="0" width="”100%”">
<ad align="center"><tr>
<th width="”30%”">维度
<th <blockquote="" classname="”text-left”" width="”35%”">
<p>
|</p>
<td <blockquote="" classname="”text-left”" width="”35%”">
<td <blockquote="" classname="”text-left”" width="”30%”">
<th align="center"><strong>调整维度
<th align="center"><strong>Vue 2 portal‑vue
<th align="center"><strong>Vue 3 Teleport
<tbody align="center">
<tr>
<td><strong>是否内置？<td> third-party library
<td> 内置于框架，无需额外依赖
<tr>
<td><strong>多源合并？<td>必须开启 multiple 并手动拼接
<td> 多个 Teleport 自动追加至同一目标
<tr>
<td><strong>条件禁用？<td>
<td> - 当为 true 时保持原位
<tr>
<td><strong>SSR 支持？<td>SSRegress 等 必须手动配置
<td> 原生 SSR 支持，无需额外代码
<tr>
<td><strong>调试体验？不过，<td>
<td> 保持原始逻辑关系。可直接查看挂载节点
<tr>
<td><strong>Wrapper 包装？<td <td="" <tr="" div="" teleport="" –="" ≥0="" ≥1="" 无额外包装节点="">
<td><strong>根节点限制？不过，<td <h3="" <td="" fragment="" 原生支持，可多根="" 超级单根="">高级能力
<ul dir="ltr" lang="en-US">
<li dir="ltr" lang="en-US">
<strong <teleport="" 
vue="" defer="" deffered="" to="#lazy-mounted-root" –="" 延迟查找目标元素：="" 渲染="">
<span v-if="isMounted">目标还没出现…挂载后再搬过去，<span></span>
<teleport></teleport>
<li dir="ltr" lang="en-US">
<strong <ul="" teleport="" 多个同名="" 自动合并：="">
<li>
多个 <code><Teleport to='body'></Teleport></code> 不会相互覆盖，而是按顺序成为 <code>body</code> 子节点 —— 与 <code>multiple</code> 配置等价但无需任何设置。</li>
</strong></li>
</span></strong></li>
</ul>
<p>
<li dir="ltr" lang="en-US">
</li>
</p>
<p>
<strong p="" 条件禁用保留原位渲染：<="">
<p>
vue
<teleport :disabled="isMobile" to="body">
<teleport></teleport></teleport></p>
<h2>
四、迁移建议</h2>
<p>
<ol dir="ltr" lang="en-US" start="1">
</ol>
</p>
<p>
<li dir="ltr" lang="en-US">
</li>
</p>
<p>
<strong <code="" 步骤①="" ：卸载="">portal-vue 并删除所有 <code><portal></code> / <code><portal-target></code> 标签。</strong></p>
<p>
<li dir="ltr" lang="en-US">
</li>
</p>
</strong></p>
</td></strong></td></td></strong></td></tr>
</td></td></strong></td></tr>
</td></td></strong></td></tr>
</td></td></strong></td></tr>
</td></td></strong></td></tr>
</td></td></strong></td></tr>
</tbody>
</strong></th></strong></th></strong></th></td></td></th></th></tr>
</ad></table>
</teleport></teleport>