<Teleport> render markup của một component ở một vị trí khác trong DOM so với nơi nó được khai báo trong cây component của bạn — trong khi vẫn giữ nó về mặt logic là một phần của component (reactivity, props, sự kiện đều vẫn hoạt động).
Modal, tooltip, và thông báo thường cần là để tránh các vấn đề CSS — một , , hoặc stacking context của cha có thể cắt xén hoặc đặt sai lớp một modal. Nhưng về mặt logic, modal thuộc về component kích hoạt nó.
<body>overflow: hiddentransformz-index<template>
<button @click="open = true">Open Modal</button>
<Teleport to="body"> <!-- render cái này ở nơi khác... -->
<div v-if="open" class="modal-overlay">
<div class="modal">
<p>I'm declared inside this component...</p>
<p>...but rendered as a child of <body>!</p>
<button @click="open = false">Close</button>
</div>
</div>
</Teleport>
</template>
Markup của modal được chuyển đến làm con của <body> trong DOM thật, thoát khỏi các cha gây cắt xén/stacking — nhưng open, @click, và mọi props vẫn hoàn toàn reactive, vì về mặt logic nó vẫn là một phần của component này.
Không có Teleport: Với Teleport to="body":
<div style="overflow:hidden"> <body>
<div style="transform:..."> ...
<Modal/> ← bị cắt/kẹt <Modal/> ← tự do, nằm trên mọi thứ
Bằng cách thoát khỏi các tổ tiên gây kẹt, modal có thể bao phủ đáng tin cậy toàn bộ viewport và nằm trên mọi nội dung khác với một z-index dễ dự đoán.
<Teleport to="#modal-root">...</Teleport> <!-- một container cụ thể -->
<Teleport to="body" :disabled="isMobile">...</Teleport> <!-- vô hiệu hóa có điều kiện -->
Teleport giải quyết gọn gàng vấn đề CSS kinh điển của các overlay (modal, tooltip, toast, dropdown) bị cắt xén hoặc đặt sai lớp bởi các tổ tiên DOM của chúng.
Nó cho phép bạn viết overlay ở nơi nó thuộc về về mặt logic (bên trong component kích hoạt, với reactivity đầy đủ) trong khi render nó ở nơi nó cần trong DOM (thường là <body>).
Đây là tương đương tích hợp sẵn của Vue cho React portal — cách chuẩn, vững chắc để xây dựng UI overlay.