关于前端:Vue3-Teleport-简介请过目这个是真的好用

39次阅读

共计 2164 个字符,预计需要花费 6 分钟才能阅读完成。

作者:Matt Maribojoc
译者:前端小智
起源:stackabuse

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 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 中。

上面是运行的后果:

查看元素和查看 DOM 能够分明地晓得产生了什么。

咱们能够应用 VuePortals 组件中的所有逻辑,然而通知咱们的我的项目在其余中央渲染该模板代码!

总结

以上就是 Vue Teleport 的根本介绍。在不久的未来,前面会介绍一些更高级的用例,明天这篇开始应用此炫酷性能开始!

无关更深刻的教程,查看 Vue3 文档。

~ 完,我是刷碗智,我要去刷晚了,骨得白!


代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文:https://learn.co/2020/09/an-i…

交换

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

正文完
 0