Vue3中的Teleport功能怎么使用

这篇文章主要介绍“Vue3中的Teleport功能怎么使用”,在日常操作中,相信很多人在Vue3中的Teleport功能怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中的T

这篇文章主要介绍“Vue3中的Teleport功能怎么使用”,在日常操作中,相信很多人在Vue3中的Teleport功能怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3中的Teleport功能怎么使用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

Vue3中的Teleport功能怎么使用

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

Teleport 的目的

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

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

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

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

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

Vue Teleport 是如何工作的

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

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

  1. // index.html
  2. <body>
  3.    <div id="app"></div>
  4.    <div id='portal-target'></div>
  5. </body>

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

  1. // VuePortals.vue
  2. <template>
  3.   <div class='portals'>
  4.     <button @click='showNotification'> Trigger Notification! </button>
  5.     <teleport to='#portal-target'>
  6.       <div v-if="isOpen" class='notification'>
  7.         This is rendering outside of this child component!
  8.       </div>
  9.     </teleport>
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14. import { ref } from 'vue'
  15. export default {
  16.   setup () {
  17.     const isOpen = ref(false)
  18.  
  19.     var closePopup
  20.  
  21.     const showNotification = () => {
  22.       isOpen.value = true
  23.  
  24.       clearTimeout(closePopup)
  25.  
  26.       closePopup = setTimeout(() => {
  27.         isOpen.value = false
  28.       }, 2000)
  29.     }
  30.  
  31.     return {
  32.       isOpen,
  33.       showNotification
  34.     }
  35.   }
  36. }
  37. </script>
  38.  
  39. <style scoped>
  40.   .notification {
  41.     font-family: myriad-pro, sans-serif;
  42.     position: fixed;
  43.     bottom: 20px;
  44.     left: 20px;
  45.     width: 300px;
  46.     padding: 30px;
  47.     background-color: #fff;
  48.   }
  49. </style>

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

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

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

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

下面是运行的结果:

Vue3中的Teleport功能怎么使用

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

Vue3中的Teleport功能怎么使用

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

到此,关于“Vue3中的Teleport功能怎么使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注恰卡网网站,小编会继续努力为大家带来更多实用的文章!

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
后端

怎么使用Vue+canvas实现视频截图功能

2022-7-16 9:08:20

后端

redis lua限流算法如何实现

2022-7-16 9:08:24

搜索