Vue3中的Teleport功能怎么使用

這篇文章主要介紹“Vue3中的Teleport功能怎么使用”，在日常操作中，相信很多人在Vue3中的Teleport功能怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue3中的Teleport功能怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

網(wǎng)站設(shè)計、網(wǎng)站制作的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián)公司多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)公司，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

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

Teleport 的目的

我首先要了解的是何時使用 Teleport 功能。

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

實際上，在很多時候，與我們的Vue應用程序的DOM完全分開處理時，這些元素的管理要容易得多。所有這些都是因為處理嵌套組件的位置，z-index和樣式可能由于處理其所有父對象的范圍而變得棘手。

這種情況就是 Teleport 派上用場的地方。我們可以在邏輯所在的組件中編寫模板代碼，這意味著我們可以使用組件的數(shù)據(jù)或 props。但是，然后完全將其渲染到我們Vue應用程序的范圍之外。

如果不使用 Teleport，我們將不得不擔心從子組件向DOM樹傳遞邏輯的事件傳播，但現(xiàn)在要簡單得多。

Vue Teleport 是如何工作的

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

我們要做的第一件事是打開我們的index.html，并在</body>之前添加一個<p>。

// 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 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 (如果在瀏覽器環(huán)境中使用)。指定將在其中移動 <teleport> 內(nèi)容的目標元素

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

下面是運行的結(jié)果：

Vue3中的Teleport功能怎么使用

檢查元素和查看DOM可以清楚地知道發(fā)生了什么。

Vue3中的Teleport功能怎么使用

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

到此，關(guān)于“Vue3中的Teleport功能怎么使用”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

文章標題：Vue3中的Teleport功能怎么使用
分享網(wǎng)址：http://chinadenli.net/article34/jpsdpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、動態(tài)網(wǎng)站、企業(yè)建站、虛擬主機、ChatGPT、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue3中的Teleport功能怎么使用

Teleport 的目的

Vue Teleport 是如何工作的