快捷導(dǎo)航

詳解Vue3中Teleport的使用

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

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

Teleport 的目的

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

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

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

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

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

Teleport 是怎樣工作的

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

首先編輯 index.html 并在 </body> 之前添加一個 <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>

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

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

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