Vue3 Teleport 简介，请过目，这个是真的好用！

╰+攻爆jí腚メ 2022-11-15 11:54 174阅读 0赞

> 作者：Michael Thiessen  
> 译者：前端小智  
> 来源：news

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

关于 ve3 的一个新特性已经讨论了一段时间了，那就是 `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`中。

下面是运行的结果：

![在这里插入图片描述][20210401082241337.gif_pic_center]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]

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

### 总结 ###

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

有关更深入的教程，查看[Vue3文档][Vue3]。

~完，我是刷碗智，我要去刷晚了，骨得白！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文： https://learn.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/

### 交流 ###

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[20210401082241337.gif_pic_center]: /images/20221022/d61af7b5433d4c80a1269b73433871bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQ5MjQ1ODg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/9d5cdb9207184502b91c16ccec95626e.png
[Vue3]: https://v3.vuejs.org/guide/teleport.html
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi