<template> (<template>)
عنصر «تمپلیت (Template)» ظرف نامرئی است. یعنی خودش رندر نمی شود، اما محتوای داخلش با دستورهای Vue مثل v-if، v-for و v-slot مدیریت می شود. مثل پرونده شفاف که نوشته ها داخلش دیده می شود، اما خودش حساب نمی شود.
تعریف کوتاه و کاربرد
تگ HTML <template> وقتی کنار دستورهای Vue باشد، تبدیل به عنصر داخلی Vue می شود. سپس می تواند چند المنت را یکجا شرطی، تکرار یا به یک اسلات بفرستد. خود <template> عنصر DOM نمی سازد.
مثال 1: چند آیتم با v-if
<ul>
<li>Trolltunga</li>
<template v-if="display">
<li>Potato Point</li>
<li>The souks of Marrakech</li>
<li>Dry Tortugas</li>
<li>Halong Bay</li>
</template>
<li>...</li>
</ul>
مثال 2: بستن چند المنت و ارسال به اسلات نام دار
<template>
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p and the h4 above go to the bottom slot.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
</template>
مثال 3: اسکریپت کامل با v-if داخل template
<div id="app">
<template v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</template>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
};
}
});
app.mount('#app');
<\/script>
گام های عملی
- وقتی چند المنت داری، همه را داخل <template> بگذار.
- سپس v-if یا v-for را روی خود <template> بنویس.
- اگر محتوا باید به اسلات خاص برود، از v-slot استفاده کن.
نکته: تاپ لِول <template> در فایل SFC ساختاری است. بنابراین روی آن دستور Vue نگذار.
هشدار: خود <template> رندر نمی شود. بنابراین روی آن استایلِ مستقیم اثر ندارد.
پیوندهای داخلی
برای تکمیل موضوع، صفحه اسلات در Vue و کامپوننت پویا را ببین. همچنین مرجع المان های توکار مفید است.
جمع بندی سریع
- <template> ظرف نامرئی برای چند المنت است.
- با v-if و v-for عالی کار می کند.
- با v-slot محتوا را به اسلات می فرستد.
- خودش DOM نمی سازد و استایل نمی گیرد.