码云前端 2022-02-15

Vue3 Teleport 简介

AI 概述

Teleport 的目的Vue Teleport 是如何工作的总结关于 Vue3 的一个新特性已经讨论了一段时间了，那就是 Portals(传送门) ，它的功能是将模板 HTML 移动到 DOM 不同地方的方法。Portals是 React 中的一个常见特性，Vue2 中可以使用portal-vue库。 Vue3 中，提供了 Teleport 来支持这一功能。 Teleport 的...

文章目录隐藏

Teleport 的目的
Vue Teleport 是如何工作的
总结

关于 Vue3 的一个新特性已经讨论了一段时间了，那就是 Portals(传送门) ，它的功能是将模板 HTML 移动到 DOM 不同地方的方法。Portals是 React 中的一个常见特性，Vue2 中可以使用portal-vue库。

Vue3 中，提供了 Teleport 来支持这一功能。

Teleport 的目的

我首先要了解的是何时使用 Teleport 功能。

在处理较大的 Vue 项目时，有逻辑处理组织代码库是很重要的。但是，当处理某些类型的组件（如模式，通知或提示）时，模板 HTML 的逻辑可能位于与我们希望渲染元素的位置不同的文件中。

实际上，在很多时候，与我们的 Vue 应用程序的 DOM 完全分开处理时，这些元素的管理要容易得多。所有这些都是因为处理嵌套组件的位置，z-index和样式可能由于处理其所有父对象的范围而变得棘手。

这种情况就是 Teleport 派上用场的地方。我们可以在逻辑所在的组件中编写模板代码，这意味着我们可以使用组件的数据或 props。但是，然后完全将其渲染到我们 Vue 应用程序的范围之外。

如果不使用 Teleport，我们将不得不担心从子组件向 DOM 树传递逻辑的事件传播，但现在要简单得多。

Vue Teleport 是如何工作的

假设我们有一些子组件，我们想在其中触发弹出的通知。正如刚才所讨论的，如果将通知以完全独立的 DOM 树渲染，而不是 Vue 的根#app元素，则更为简单。

我们要做的第一件事是打开我们的index.html，并在</body>之前添加一个<div>。

// index.html
<body>
   <div id="app"></div>
   <div id='portal-target'></div>
</body>

接下来，创建触发要渲染的通知的组件。

// VuePortals.vue
<template>
  <div class='portals'>
    <button @click='showNotification'> Trigger Notification! </button>
    <teleport to='#portal-target'>
      <div v-if="isOpen" class='notification'>
        This is rendering outside of this child component!
      </div>
    </teleport>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup () {
    const isOpen = ref(false)

    var closePopup

    const showNotification = () => {
      isOpen.value = true

      clearTimeout(closePopup)

      closePopup = setTimeout(() => {
        isOpen.value = false
      }, 2000)
    }

    return {
      isOpen,
      showNotification
    }
  }
}
</script>

<style scoped>
  .notification {
    font-family: myriad-pro, sans-serif;
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    padding: 30px;
    background-color: #fff;
  }
</style>

在此代码段中，当按下按钮时，将渲染 2 秒钟的通知。但是，我们的主要目标是使用 Teleport 获取通知以在我们的 Vue 应用程序外部渲染。

如你所见，Teleport具有一个必填属性to

to 需要 prop，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 <teleport> 内容的目标元素

由于我们在#portal-target中传递了代码，因此 Vue 会找到包含在index.html中的#portal-target div，它会把 Teleport 内的所有代码渲染到该div中。

运行结果：

检查元素和查看 DOM 可以清楚地知道发生了什么。

我们可以使用VuePortals组件中的所有逻辑，但是告诉我们的项目在其他地方渲染该模板代码！

总结

以上就是 Vue Teleport 的基本介绍。在不久的将来，后面会介绍一些更高级的用例，今天这篇开始使用此炫酷功能开始！

以上关于Vue3 Teleport 简介的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » Vue3 Teleport 简介

码云 SVIP

分享到：

Teleport 的目的

Vue Teleport 是如何工作的

总结

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复