詳解Vue3中Teleport的使用

更新時(shí)間：2021年05月21日 10:54:56 作者：前端先鋒

門戶（Portal）的概念是Vue3的新功能之一，也就是將模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常見功能，Vue2 的 portal-vue  庫也提供了相似的功能。在 Vue3 中用 Teleport 對(duì)這個(gè)概念提供了原生支持。本文將介紹Teleport的相關(guān)用法

Teleport 的目的

首先是什么時(shí)候以及使用這個(gè) Teleport 功能。

在開發(fā)較大的 Vue 項(xiàng)目時(shí)應(yīng)該以可重用的邏輯去組織代碼。但是當(dāng)處理某些類型的組件（如模式、通知或工具提示）時(shí)，模板 HTML 的邏輯可能不會(huì)和我們希望渲染元素處于相同的文件中。

實(shí)際上在大多數(shù)情況下，與 Vue 的 DOM 完全分開處理相比，處理這些元素要容易得多。因?yàn)榍短捉M件的位置、z-index 和樣式等這些東西，可能由于需要處理其所有父對(duì)象的作用域而變得棘手。

而這些正是 Teleport 的用武之地。我們可以在邏輯所在的組件中編寫模板代碼，因?yàn)檫@樣我們可以使用組件的數(shù)據(jù)或 props。

如果不用 Teleport，我們還必須擔(dān)心事件傳播會(huì)把邏輯從子組件傳遞給 DOM 樹。

Teleport 是怎樣工作的

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

首先編輯 index.html 并在 </body> 之前添加一個(gè) <div>。

//index.html
<body>
   <div id="app"></div>
   <div id='portal-target'></div>
</body>

接下來創(chuàng)建觸發(fā)渲染通知的組件。

//VuePortals.vue
<template>
  <div class='portals'>
    <button @click='showNotification'> Trigger Notification! </button>
    <teleport to='#portal-target'>
      <div 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>

在這代碼段中，按下按鈕時(shí)，將渲染通知 2 秒鐘。但是我們的主要目標(biāo)是用 Teleport 獲取通知并在 VUE 程序外部渲染。

如你所見，Teleport 有一個(gè)必填屬性：to

to 屬性使用有效的 DOM 查詢字符串，它可以是：