在本文中，我們將介紹：

• Teleport 的目的
• Teleport 的例子
• 一些很有意思的程式碼互動
  

Teleport 的目的

首先是什麼時候以及使用這個 Teleport 功能。

在開發較大的 vue 專案時應該以可重用的邏輯去組織程式碼。但是當處理某些型別的元件（如模式、通知或工具提示）時，模板 HTML 的邏輯可能不會和我們希望渲染元素處於相同的檔案中。

實際上在大多數情況下，與 Vue 的 DOM 完全分開處理相比，處理這些元素要容易得多。因為巢狀元件的位置、z-index 和樣式等這些東西，可能由於需要處理其所有父物件的作用域而變得棘手。

而這些正是 Teleport 的用武之地。我們可以在邏輯所在的元件中編寫模板程式碼，因為這樣我們可以使用元件的資料或 props。

如果不用 Teleport，我們還必須擔心事件傳播會把邏輯從子元件傳遞給 DOM 樹。

Teleport 是怎樣工作的

假設有一些子元件，我們想在其中觸發彈出的通知。正如剛剛討論的那樣，如果將通知以完全獨立的 DOM 樹渲染，而不是 Vue 的根 #app 元素，會更加簡單。

首先編輯 index.html 並在 </body> 之前新增一個 <div>。

//index.html
<body程式設計客棧>
<divid="app"></div>
<divid='portal-target'></div>
</body>

接下來建立觸發渲染通知的元件。

//VuePortals.vue
<template>
<divclass='portals'>
<button@click='showNotification'>TriggerNotification!&nbshttp://www.cppcns.comp;</button>
<teleportto='#portal-target'>
<divclass='notification'>
Thisisrenderingoutsideofthischildcomponent!
</div>
</teleport>
</div>
</template>

<script>
import{ref}from'vue'
exportdefault{
setup(){
constisOpen=ref(false)

varclosePopup

constshowNotification=()=>{
isOpen.value=true

clearTimeout(closePopup)

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

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

<stylescoped>
.notification{
font-family:myriad-pro,sans-serif;
position:fixed;
bottom:20px;
left:20px;
width:300px;
padding:30px;
background-color:#f
 
程式設計客棧ff;
}
</style>

在這程式碼段中，按下按鈕時，將渲染通知 2 秒鐘。但是我們的主要目標是用 Teleport 獲取通知並在 VUE 程式外部渲染。

如你所見，Teleport 有一個必填屬性：to

to 屬性使用有效的 www.cppcns.comDOM 查詢字串，它可以是：

• 元素的 ID
• 元素的類
• 資料選擇器
• 響應查詢字串
  

由於我們在 #portal-target 中傳遞了程式碼，所以 Vue 程式將找到我們包含在程式設計客棧 index.html 中的 #portal-target div，它會傳送門戶中的所有程式碼並將其渲染在該 div 中。

下面是結果：

檢查元素並檢視 DOM，可以很清楚地瞭解都發生了什麼。

我們可以使用 VuePortals 組建中的所有邏輯，但是需要告訴我們的專案渲染在其他地方的哪個模板程式碼。

以上就是詳解Vue3中的Teleport的詳細內容，更多關於Vue3 中的Teleport的資料請關注我們其它相關文章！