Vue 的 Teleport 是什么？解决什么场景？

<Teleport> 把组件内部的 DOM 渲染到 DOM 树的其它位置（如 body 末尾），但逻辑/状态仍属于原组件。

<Teleport to="body">
  <div v-if="show" class="modal">弹窗内容</div>
</Teleport>

典型场景：

• 全局弹窗 / Toast / 抽屉：避免被父级 overflow:hidden、z-index、transform 层叠上下文影响
• 需要突破父容器样式隔离的浮层

注意：to="body" 后元素脱离了组件模板 DOM，但事件、响应式数据、生命周期仍受原组件控制，卸载组件时 Teleport 内容也会一并销毁。

同分类其他题目