快捷導(dǎo)航

Vue 3 的＜Teleport＞功能與用法詳解

更新時(shí)間：2025年04月09日 10:17:11 作者：像素檢測(cè)儀

<Teleport> 是 Vue 3 的一個(gè)內(nèi)置組件,允許將組件的內(nèi)容渲染到 DOM 中的任意位置,而不改變其邏輯結(jié)構(gòu),這篇文章主要介紹了Vue 3 的＜Teleport＞功能與用法詳解,需要的朋友可以參考下

1. 基本用法

<Teleport> 是 Vue 3 的一個(gè)內(nèi)置組件，允許將組件的內(nèi)容渲染到 DOM 中的任意位置，而不改變其邏輯結(jié)構(gòu)。以下是基本用法：

定義目標(biāo) DOM 元素：

<div id="teleport-target"></div>

在 Vue 組件中使用 <Teleport>：

<template>
  <button @click="isModalOpen = true">Open Modal</button>
  <Teleport to="#teleport-target">
    <div v-if="isModalOpen" class="modal">
      <p>This is a modal!</p>
      <button @click="isModalOpen = false">Close</button>
    </div>
  </Teleport>
</template>

在這個(gè)例子中，模態(tài)框會(huì)被渲染到 #teleport-target 元素中。

2. 動(dòng)態(tài)目標(biāo)節(jié)點(diǎn)

可以通過動(dòng)態(tài)綁定 to 屬性來改變目標(biāo)節(jié)點(diǎn)：

示例代碼：

<Teleport :to="targetElement">
  <p>This will be rendered in the target element.</p>
</Teleport>

在 mounted 鉤子中動(dòng)態(tài)設(shè)置目標(biāo)節(jié)點(diǎn)：

export default {
  data() {
    return {
      targetElement: null
    };
  },
  mounted() {
    this.targetElement = document.querySelector('#custom-element');
  }
};
```。