<Teleport>是一個(gè)內(nèi)置組件，它允許我們將組件模板的一部分“傳送”到存在于該組件 DOM 層次結(jié)構(gòu)之外的 DOM 節(jié)點(diǎn)中。
Teleport 的目的
我們首先要了解的是，何時(shí)使用、以及為什么使用 Teleport。
在處理更大的 Vue 項(xiàng)目時(shí)，以邏輯的方式組織代碼庫變得非常重要。然而，當(dāng)處理某些類型的組件（如模態(tài)、通知或工具提示）時(shí)，模板 HTML 的邏輯可能位于不同的文件中，而不是我們想要渲染元素的文件中。
事實(shí)上，很多時(shí)候，當(dāng)這些元素與我們的 Vue 應(yīng)用程序的 DOM 完全分開處理時(shí)，它們更容易管理。這一切都是因?yàn)樘幚砬短捉M件的定位、z-index 和樣式可能會因?yàn)樘幚砥渌懈附M件的范圍而變得棘手。
這就是 Teleport 功能派上用場的地方。我們可以在其邏輯所在的組件中編寫模板代碼，這意味著我們可以使用組件的 data 或 props。隨后將其渲染到 Vue 應(yīng)用程序的范圍之外。
如果不使用 Teleport，我們將不得不擔(dān)心事件傳播，以便將邏輯從子組件傳遞到DOM 樹，但現(xiàn)在要簡單得多。
讓我們看一個(gè)例子。
Teleport 示例
假設(shè)我們有一個(gè)子組件，我們想在其中觸發(fā)彈出的通知。
首先，在 </body> 之前添加一個(gè) <div>：
<body>
<div id="app"></div>
<div id='notification'></div>
</body>
接下來，讓我們開始創(chuàng)建觸發(fā)要渲染通知的組件。
<template>
<teleport to="#notification">
<div v-if="isOpen" class="notification">您干嘛呀！</div>
</teleport>
</template>
<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
const closePopup: any = ref(null)
const showNotification = () => {
isOpen.value = true
clearTimeout(closePopup.value)
closePopup.value = setTimeout(() => {
isOpen.value = false
}, 2000)
}
</script>
<style lang="scss" scoped>
.notification {
font-family: myriad-pro, sans-serif;
position: fixed;
bottom: 20px;
left: 20px;
width: 300px;
padding: 30px;
background-color: plum;
}
</style>
它的步驟很簡單：
- 在您想要插入 DOM 的地方，預(yù)留一個(gè)標(biāo)簽，并提供一個(gè)
id或class，讓teleport知道是哪個(gè)標(biāo)簽。 - 編寫一段需要渲染的 HTML 結(jié)構(gòu)，并使用
teleport組件包裹住它。 - 在
teleport標(biāo)簽上使用to屬性，指向預(yù)留的標(biāo)簽。to的值為提供標(biāo)簽的id或class。
