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

時間 2021-04-02

標籤 html 前端 vue git github 面試瀏覽器微信 app ide 欄目 HTML 简体版

原文原文鏈接

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

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

關於 ve3 的一個新特性已經討論了一段時間了，那就是 Portals(傳送門) ，它的功能是將模板HTML移動到DOM不一樣地方的方法。Portals是React中的一個常見特性，Vue2 中可使用portal-vue庫。html

Vue3 中，提供了 Teleport 來支持這一功能。前端

Teleport 的目的

我首先要了解的是什麼時候使用 Teleport 功能。vue

在處理較大的Vue項目時，有邏輯處理組織代碼庫是很重要的。可是，當處理某些類型的組件（如模式，通知或提示）時，模板HTML的邏輯可能位於與咱們但願渲染元素的位置不一樣的文件中。git

實際上，在不少時候，與咱們的Vue應用程序的DOM徹底分開處理時，這些元素的管理要容易得多。全部這些都是由於處理嵌套組件的位置，z-index和樣式可能因爲處理其全部父對象的範圍而變得棘手。github

這種狀況就是 Teleport 派上用場的地方。咱們能夠在邏輯所在的組件中編寫模板代碼，這意味着咱們可使用組件的數據或 props。可是，而後徹底將其渲染到咱們Vue應用程序的範圍以外。面試

若是不使用 Teleport，咱們將不得不擔憂從子組件向DOM樹傳遞邏輯的事件傳播，但如今要簡單得多。瀏覽器

Vue Teleport 是如何工做的

假設咱們有一些子組件，咱們想在其中觸發彈出的通知。正如剛纔所討論的，若是將通知以徹底獨立的DOM樹渲染，而不是Vue的根#app元素，則更爲簡單。微信

咱們要作的第一件事是打開咱們的index.html，並在</body>以前添加一個<div>。app

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

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

// 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文檔。

~完，我是刷碗智，我要去刷晚了，骨得白！

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

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

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。