選單
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue 教程

Vue 首頁 Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue:為什麼、如何以及設定 Vue:第一個 SFC 頁面 Vue:元件 Vue:Props Vue:v-for 元件 Vue:$emit() Vue:Fallthrough Attributes Vue:Scoped Styling Vue:本地元件 Vue:Slots Vue:v-slot Vue:Scoped Slots Vue:動態元件 Vue:Teleport Vue:HTTP 請求 Vue:Template Refs Vue:生命週期鉤子 Vue:Provide/Inject Vue:路由 Vue:表單輸入 Vue:動畫 Vue:帶 v-for 的動畫 Vue:構建 Vue:Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue 示例

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

Vue <Teleport> 元件


示例

使用內建的 <Teleport> 元件將 <div> 元素移動到 <body> 的根部

<Teleport to="body">
  <div id="redDiv">Hello!</div>
</Teleport>
執行示例 »

更多示例請參見下方。


定義和用法

內建的 <Teleport> 元件與 to prop 一起使用,可以將元素從當前 HTML 結構移出,並放入已掛載到 DOM 中的另一個元素。

要檢視元素是否真的透過 <Teleport> 元件移動到其他位置,您可能需要右鍵單擊並檢查頁面。

傳送的元素會出現在目標位置中已掛載的其他元素之後。因此,如果多個元素被傳送到同一個目標位置,則最後傳送的元素將出現在其他已傳送元素下方。

如果使用 <Teleport> 來移動元件,那麼與該元件的通訊(透過 provide/inject 或 prop/emit)仍然像以前一樣工作,就好像元件沒有被移動一樣。

此外,如果一些內容透過 <Teleport> 被移出元件,Vue 會確保元件在 <script><style> 標籤中的相關程式碼仍然對被移動的內容有效。請參見下面的示例。


Props

Prop 描述
to 必需。字串。指定目標的名稱 執行示例 »
disabled 可選。布林值。指定是否應停用 teleport 功能 執行示例 »

更多示例

示例

即使 <div> 元素在編譯後不再位於元件內部,<style><script> 標籤中的相關程式碼仍然對傳送的 <div> 元素有效。

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <Teleport to="body">
      <div 
        id="redDiv" 
        @click="toggleVal = !toggleVal" 
        :style="{ backgroundColor: bgColor }"
      >
        Hello!<br>
        Click me!
      </div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      toggleVal: true
    }
  },
  computed: {
    bgColor() {
      if (this.toggleVal) {
        return 'lightpink'
      }
      else {
        return 'lightgreen'
      }
    }
  }
}
</script>

<style scoped>
#redDiv {
  margin: 10px;
  padding: 10px;
  display: inline-block;
}

#redDiv:hover {
  cursor: pointer;
}
</style>
執行示例 »

示例

布林值 disabled prop 透過一個按鈕切換,以便 <div> 元素可以被傳送或不被傳送。

CompOne.vue:

<template>
  <div>
    <h2>Component</h2>
    <p>This is the inside of the component.</p>
    <button @click="teleportOn = !teleportOn">Teleport on/off</button>
    <Teleport to="body" :disabled="teleportOn">
      <div id="redDiv">Hello!</div>
    </Teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      teleportOn: true
    }
  }
}
</script>

<style scoped>
  #redDiv {
    background-color: lightcoral;
    margin: 10px;
    padding: 10px;
    width: 100px;
  }
</style>
執行示例 »

相關頁面

Vue 教程:Vue Teleport


×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業,請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤,或想提出建議,請傳送電子郵件給我們
help@w3schools.com

W3Schools 經過最佳化,旨在方便學習和培訓。示例可能經過簡化,以提高閱讀和學習體驗。教程、參考資料和示例會不斷審查,以避免錯誤,但我們無法保證所有內容的完全正確性。使用 W3Schools 即表示您已閱讀並接受我們的使用條款Cookie 和隱私政策

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援