Vue3 Teleport 簡介，請過目，這個是真的好用！

關於 Vue3 的一個新特性已經討論了一段時間了，那就是 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，並在</body>之前添加一個<div>。

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

接下來，創建觸發要渲染的通知的組件。

// VuePortals.vue
<template>
  <div class='portals'>
    <button @click='showNotification'> Trigger Notification! </button>
    <teleport to='#portal-target'>
      <div v-if="isOpen" 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 需要 prop，必須是有效的查詢選擇器或 HTMLElement (如果在瀏覽器環境中使用)。指定將在其中移動 <teleport> 內容的目標元素

由於我們在#portal-target中傳遞了代碼，因此 Vue 會找到包含在index.html中的#portal-target div，它會把 Teleport 內的所有代碼渲染到該div中。

下面是運行的結果：

檢查元素和查看 DOM 可以清楚地知道發生了什麼。

我們可以使用VuePortals組件中的所有邏輯，但是告訴我們的項目在其他地方渲染該模板代碼！

總結

以上就是 Vue Teleport 的基本介紹。在不久的將來，後面會介紹一些更高級的用例，今天這篇開始使用此炫酷功能開始！

有關更深入的教程，查看 Vue3 文檔。

作者：Michael Thiessen 譯者：前端小智來源：news

原文：https://learn.co/2020/09/an-introduction-to-vue-teleport-a-new-feature-in-vue3/

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/xlytZhw-NGyWwAZiajqU6g

Teleport 的目的

Vue Teleport 是如何工作的

總結

猜你喜歡