Teleport (Teleport)
تله پورت Vue یعنی جابه جایی محتوا داخل DOM. «DOM» همان ساختار درختی صفحه است. با تگ <Teleport> محتوا را به جای دیگر می فرستیم. این کار برای مودال ها عالی است.
تگ <Teleport> و ویژگی to
برای جابه جایی، محتوا را داخل <Teleport> بگذارید و مقصد را با to مشخص کنید. مقدار to بر اساس انتخاب گر CSS نوشته می شود.
<Teleport to="body">
<p>Hello!</p>
</Teleport>
می توانید به هر عنصر هدف بفرستید؛ مثلاً به یک div با id خاص: <Teleport to="#receivingDiv">.
نمونه ساده داخل کامپوننت
در این نمونه، یک div قرمز از داخل کامپوننت، به انتهای body منتقل می شود.
<template>
<div>
<h2>Component</h2>
<p>This is the inside of the component.</p>
<Teleport to="body">
<div id="redDiv">Hello!</div>
</Teleport>
</div>
</template>
کد اسکریپت و استایل همچنان کار می کند
با وجود انتقال محتوا، منطق <script> و استایل های scoped همان کامپوننت، روی عنصر تله پورت شده اعمال می شود.
<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>
گام های عملی
- یک مقصد ثابت در صفحه تعیین کن؛ مثلاً body.
- محتوا را داخل <Teleport to="..."> قرار بده.
- در صورت نیاز، از id یا کلاس مقصد استفاده کن.
- تعامل ها و استایل ها را در همان کامپوننت بنویس.
نکته: برای مودال و پنجره شناور، تله پورت دید بهتر و تداخل کمتر می دهد.
جمع بندی سریع
- <Teleport> محتوا را در DOM جابه جا می کند.
- to مقصد را با selector تعیین می کند.
- کد script و style همچنان مؤثر است.
- برای مودال ها و تولتیپ ها عالی است.
مطالب مرتبط: کامپوننت های پویا، تله پورت Vue، و درخواست های HTTP.