成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

Vue3 Teleport 簡介,請過目,這個是真的好用!

開發 前端
關于 ve3 的一個新特性已經討論了一段時間了,那就是 Portals(傳送門) ,它的功能是將模板HTML移動到DOM不同地方的方法。Portals是React中的一個常見特性,Vue2 中可以使用portal-vue庫。

[[390595]]

本文已經過原作者 ichael Thiessen 授權翻譯。

關于 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,并在之前添加一個<div>。

  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. </script> 
  37.  
  38. <style scoped> 
  39.   .notification { 
  40.     font-family: myriad-pro, sans-serif; 
  41.     position: fixed; 
  42.     bottom: 20px; 
  43.     left: 20px; 
  44.     width: 300px; 
  45.     padding: 30px; 
  46.     background-color: #fff; 
  47.   } 
  48. </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文檔。

 

責任編輯:姜華 來源: 大遷世界
相關推薦

2020-12-01 08:34:31

Vue3組件實踐

2024-10-24 09:18:45

2023-11-28 09:03:59

Vue.jsJavaScript

2021-05-12 10:25:29

開發技能代碼

2025-03-10 08:48:14

Vue生態編程

2025-02-18 08:10:00

Vue 3JavaScrip開發

2025-03-26 10:29:22

Vue3前端API

2024-09-26 14:16:07

2025-05-13 09:53:42

Vue3JavaScript開發

2021-12-01 08:11:44

Vue3 插件Vue應用

2021-10-29 07:47:35

Vue 3teleport傳送門組件

2021-11-30 08:19:43

Vue3 插件Vue應用

2023-11-29 09:05:59

Vue 3場景

2024-01-04 08:38:21

Vue3API慎用

2024-07-15 08:02:37

2020-09-19 21:15:26

Composition

2022-08-26 10:01:48

Vue3TS

2025-05-06 09:35:00

2021-12-02 05:50:35

Vue3 插件Vue應用

2024-08-13 09:26:07

點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 免费久久久 | 国产一区二区免费 | 日韩中文字幕av | 日韩在线播放中文字幕 | 午夜免费 | 国产黄色大片在线观看 | а_天堂中文最新版地址 | 亚洲欧美综合精品久久成人 | 日韩一区二区三区av | 欧美一区二区 | 女女百合av大片一区二区三区九县 | 午夜国产| 99亚洲综合 | 成人精品一区二区三区中文字幕 | 国内久久 | 国产在视频一区二区三区吞精 | 欧美日韩国产一区二区 | 欧美综合一区 | 先锋av资源在线 | 亚洲成年在线 | h漫在线观看 | 亚洲精品在线免费播放 | 日韩高清一区 | 精品欧美乱码久久久久久1区2区 | 黄色av免费网站 | 日韩波多野结衣 | 欧美久久久久久久久 | 插插插干干干 | 精品国产一区二区三区久久久四川 | 亚洲欧美日韩精品久久亚洲区 | 亚洲精品一区二区 | 欧美一区二区三区视频在线观看 | 啪啪毛片 | 亚洲午夜精品 | 美女中文字幕视频 | 日韩一区二区福利视频 | 99在线视频观看 | 欧美日韩不卡合集视频 | 日韩三级在线 | 黄色网址免费在线观看 | 日韩精品一区二区三区中文在线 |