Teleport 是Vue 3 中用於將模板部分內(nèi)容渲染到DOM 其他位置的內(nèi)置組件，1. 它通過to 屬性指定目標(biāo)位置，如body 或#modal-container；2. 常用於解決模態(tài)框、下拉菜單等因父元素overflow 或z-index 導(dǎo)致的顯示問題；3. 儘管DOM 位置改變，事件和響應(yīng)式仍正常工作；4. 需確保目標(biāo)元素存在，否則內(nèi)容不渲染；5. 使用時需注意可訪問性，如焦點管理和ARIA 屬性，最終實現(xiàn)脫離組件層級的靈活佈局。
Teleport is a built-in Vue 3 component that lets you render a part of your component's template into a different location in the DOM — typically outside the parent component's structure. This is especially useful for things like modals, tooltips, dropdowns, or notifications that need to be positioned at the top level (like body ) to avoid CSS clipping or z-index issues.
Here's how to use Teleport in Vue 3:
? What Teleport Does
By default, components render within their parent's DOM structure. But sometimes, you want a child component (like a modal) to visually "break out" of its parent. That's where Teleport comes in.
<template>
<div class="modal-button">
<button @click="open = true">Open Modal</button>
<!-- This will be moved outside the current DOM structure -->
<Teleport to="body">
<div v-if="open" class="modal">
<p>This is a modal</p>
<button @click="open = false">Close</button>
</div>
</Teleport>
</div>
</template>
<script setup>
import { ref } from 'vue'
const open = ref(false)
</script> In this example, even though the <Teleport> is nested inside .modal-button , the modal content will be appended directly to the <body> .
? Target Selector: to Attribute
The to prop specifies where the content should be moved in the DOM.
<Teleport to="#modal-container">
<div class="modal">Hello from teleport!</div>
</Teleport>
- Accepts any valid CSS selector:
body , #app , .modals , etc. - Must point to an existing element in the DOM.
- If the target doesn't exist, the content won't render (no error by default).
? Tip: Use body for full-screen overlays like modals or loaders.
? Common Use Case: Modal Dialog
Here's a more realistic example of a reusable modal using Teleport .
<!-- Modal.vue -->
<template>
<Teleport to="body">
<div v-if="show" class="modal-overlay" @click="onClose">
<div class="modal" @click.stop>
<h3>{{ title }}</h3>
<p>{{ message }}</p>
<button @click="onClose">OK</button>
</div>
</div>
</Teleport>
</template>
<script setup>
defineProps({
show: Boolean,
title: String,
message: String,
onClose: Function
})
</script>
<style>
.modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
</style> Use it in a parent component:
<template>
<div>
<button @click="isModalOpen = true">Show Modal</button>
<Modal
:show="isModalOpen"
title="Welcome"
message="This is inside a teleport modal!"
@close="isModalOpen = false"
/>
</div>
</template>
<script setup>
import { ref } from 'vue'
import Modal from './Modal.vue'
const isModalOpen = ref(false)
</script> Even though Modal is rendered inside this component, its content appears at the body level — avoiding layout issues.
?? Important Notes
- Events still work normally : Even after teleporting, event handlers and
v-model bindings work because Vue maintains the reactive context.
- Conditional rendering works : Use
v-if or v-show inside Teleport to control visibility.
- Multiple Teleports : You can have multiple
<teleport></teleport> components in one template, targeting different locations.
- Accessibility : When using modals, remember to manage focus and ARIA attributes for screen readers.
? When to Use Teleport
- Modals, dialogs, or popups
- Tooltips and dropdowns (especially with overflow issues)
- Notifications or toast messages
- Full-screen loaders
It solves the classic problem: "My modal is cut off because of overflow: hidden on a parent."
Basically, Teleport gives you DOM flexibility without breaking reactivity. It's clean, built-in, and very useful for UI components that need to escape their container. Not magic — just smart DOM rendering.
以上是如何在VUE 3中使用Teleport？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
![\"How](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/000\/175347555713714.jpeg\")