Vue3 teleport 瞬间移动

最新推荐文章于 2025-05-30 10:56:12 发布

林中明月间。

最新推荐文章于 2025-05-30 10:56:12 发布

阅读量362

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： html css javascript

原文链接：https://www.jianshu.com/p/1ecf5006b1ae

Vue.js 专栏收录该内容

196 篇文章

订阅专栏

Vue的Teleport特性允许将组件的内容移动到Vue应用外部的DOM节点，解决了模态框、 toast等元素在Vue组件内定位和样式管理的难题。通过Teleport，可以利用组件的数据和属性，同时避免父组件样式的影响，尤其适用于需要跳出容器显示的元素如对话框、悬浮卡。多个<teleport>组件能将内容渲染到同一目标，简化了全屏模式组件的创建和管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

场景：像 modals,toast 等这样的元素，很多情况下，我们将它完全的和我们的 Vue 应用的 DOM 完全剥离，管理起来反而会方便容易很多

原因在于如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

另外，像 modals,toast 等这样的元素需要使用到 Vue 组件的状态（data 或者 props）的值

这就是 Teleport 派上用场的地方。我们可以在组件的逻辑位置写模板代码，这意味着我们可以使用组件的 data 或 props。然后在 Vue 应用的范围之外渲染它

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。常见的情况是创建一个包含全屏模式的组件。

对话框 position: absolute 的定位相对于父 div 作为参考。Teleport 提供了一种简单的方法，使我们可以控制要在DOM中哪个父对象下呈现HTML。

https://www.jianshu.com/p/e27b3308fc0a

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>

<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

多个 <teleport> 组件可以将其内容添加到同一目标元素。