Thắng Đặng Blog – Nothing is Impossible Come to share
Teleport Component là một thành phần tích hợp trong VueJS để chuyển một nội dung của một component tới một vị trí nhất định trong DOM. Hiểu một cách nôm na là tại một component A, bạn hoàn toàn có thể viết một cấu trúc html là con cấp 1 của body hoặc ở bất kỳ vị trí nào trong DOM.
Sử dụng Teleport Component
Một ví dụ rất đơn giản để thể hiện về teleport component đó chính là modal. Đầu tiên thì mình sẽ viết khi chưa có teleport component nhé:
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<div v-if="showModal" class="modal">
<div class="modal-content">
<h2>Teleport Component</h2>
<p>This is a modal. Click outside to close.</p>
<button @click="showModal = false">Close Modal</button>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const showModal = ref(false);
return {
showModal,
};
},
};
</script>
<style>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
button {
color: #fff;
background-color: #007bff;
border-color: #007bff;
display: inline-block;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 80%;
max-width: 500px;
}
</style>Kết quả mình nhận được sẽ như sau, các bạn để ý phía dưới google dev tool nhé:
Như các bạn thấy là class .modal khi mình mở sẽ được render trong #app. Khi mình dùng teleport, cụ thể là mình sẽ bao .modal trong thẻ <Teleport> và attribute to có value là body:
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<Teleport to="body">
<div v-if="showModal" class="modal">
<div class="modal-content">
<h2>Teleport Component</h2>
<p>This is a modal. Click outside to close.</p>
<button @click="showModal = false">Close Modal</button>
</div>
</div>
</eleport>
</div>
</template>Kết quả mình nhận được sẽ là:
Như các bạn thấy là cấu trúc, nội dung của modal đã được di chuyển ngang hàng với #app, cụ thể mình đã cấu hình là con của body. Chính xác hơn, teleport chỉ thay đổi cấu trúc DOM được hiển thị – nó không ảnh hưởng đến hệ thống phân cấp logic của các component. Điều đó có nghĩa là, nếu component Child là con của component Parent, Component Child sẽ vẫn là con logic của thành phần cha chứa nó – Component Parent.
