通常，当我们在 Vue.js 中创建组件时，它们自然会出现在我们期望的 DOM 结构中。 但是，有时这没有意义。 一个很好的例子就是模态框——通常，模态框应该出现在页面上所有内容的顶部——所以如果我们在逻辑上有意义的组件中创建它，它可能会出现在某些 HTML 元素后面或需要一些奇怪的 CSS 样式 让它达到顶峰。
幸运的是，在 Vue.js 中有一个简单的方法可以解决这个问题，称为 <Teleport>。 <Teleport> 标签让我们在组件中定义一些东西，然后在代码中我们想要的任何地方“传送”它。 让我们看看它是如何工作的。
Teleport 在 Vue.js 中的工作原理
假设我们在 Vue.js 中有一个名为 Modal.vue 的简单组件，其中包含一个模式。 它看起来有点像这样：
<script>export default { data() { return { display: false } }}</script><template> <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button> <div class="modal" v-if="display"> My Modal </div></template>在我们的结构中，这种模式在我们的应用程序结构中非常深入：
由于 Modal.vue 在我们的结构中是如此之深，它可能不会像我们想要的那样出现在我们的其余内容之上。 因此，理想情况下，我们希望它是 body 标签的直接子代。 使用 <Teleport>，我们可以调整我们的组件以“传送”它成为 body 标签的直接子元素，如下所示：
<script>export default { data() { return { display: false } }}</script><template> <button id="show-modal" @click="display == true ? display = false : display = true">Show Modal</button> <Teleport to="body"> <div class="modal" v-if="display"> My Modal </div> </Teleport></template>Teleport 的 to 属性应该是一个有效的 CSS 选择器。 现在我们的 .modal div 将被传送为 body 的直接子级，所以它总是出现在顶部，而不是深深地嵌套在我们的 Vue 结构中。
禁用 Teleport 标签
我们可以使用 :disabled 属性基于某些逻辑禁用 Teleport 标签。 例如，我们可以使用以下代码检查 myToggle 的值是否设置为 true：
<Teleport :disabled="myToggle"></Teleport>上面，如果 myToggle 设置为 true，Teleport 将无法正常工作，这意味着我们只能在需要时启用它。 因此，Teleport 是 Vue.js 中一个非常有用的标签，用于调整我们在何时何地看到某些内容。 在同一个 Vue.js 模板中使用多个 Teleport 标签也是可以的。
关注七爪网，获取更多APP/小程序/网站源码资源！
以上内容为【七爪源码：如何在 Vue.js 中使用 Teleport 移动部分模板(产品迅速移动js源代码)】的相关内容。
本文内容来自用户上传并发布或网络新闻客户端自媒体，本站点仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请联系删除。
