Vue3 Teleport 簡介,請過目,這個是真的好用!

前端小智發表於2022-02-18
作者:Matt Maribojoc
譯者:前端小智
來源:stackabuse

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

關於 ve3 的一個新特性已經討論了一段時間了,那就是 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中。

下面是執行的結果:

image

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

image.png

我們可以使用VuePortals元件中的所有邏輯,但是告訴我們的專案在其他地方渲染該模板程式碼!

總結

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

有關更深入的教程,檢視Vue3文件

~完,我是刷碗智,我要去刷晚了,骨得白!


程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文: https://learn.co/2020/09/an-i...

交流

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章