Vue中Teleport如何实现跨组件长距离传送DOM元素？

本文共计777个文字，预计阅读时间需要4分钟。

目录 + 正文 + Teleport + 在 Vue 中的使用 + 禁用 Teleport + 标签 + 正常 + 通常，当我们创建 Vue 组件时，Teleport 会自动出现在我们期望的 DOM 结构中。但有时，我们并不希望这样。一个很好的例子就是模板。

目录

• 正文
• Teleport 在 Vue 中的使用
• 禁用 Teleport 标签

正文

通常，当我们在 Vue 中创建组件时，它们出现在我们期望的 DOM 结构中。但是，有时我们并不希望如此。一个很好的例子就是模态框——通常，模态框应该出现在页面上所有内容的顶部——所以如果我们在逻辑上在具体的组件中创建它，它可能会出现在某些 HTML 元素后面或需要一些奇怪的 CSS 样式让它达到顶部。

幸运的是，在 Vue 中有一种简单的方法可以解决这个问题，称为. 标签允许我们在组件中定义一些东西，然后在代码中我们想要的任何地方“传送”它。让我们看看它是如何工作的。

Teleport 在 Vue 中的使用

假设我们在 Vue 中有一个名为Modal.vue的简单组件，其中包含一个模态框。