Teleport 传送门
1. 作用
<Teleport> 允许我们将组件的 HTML 结构渲染到 DOM 树的其他位置（如 body 或 #modal-container），但同时保持组件在 Vue 逻辑树中的层级关系不动。
2. 场景
全屏弹窗 (Modal) / Tooltip / 通知 (Toast)。
- 问题：如果弹窗嵌套在深层组件里的
div(具有overflow: hidden或z-index问题) 中，它的样式很难控制，容易被遮挡。 - 解决：使用 Teleport 把它“传”到
<body>标签下，这样它就脱离了父级 CSS 的束缚，可以轻松绝对定位。
3. 示例
4. 关键点
- 逻辑关系保持：虽然 DOM 移走了，但 props 传递、事件冒泡即便跨越了 DOM，依然遵循 Vue 组件树 结构。子组件 emit 事件，父组件依然能收到。
- 禁用：
:disabled="true"可以暂时禁止传送（原地渲染）。
ON THIS PAGE