اسلات‌ها
در ویو جی‌اس (Vue.js)، اسلات‌ها یک ویژگی قدرتمند برای ایجاد کامپوننت‌های قابل استفاده مجدد و منعطف هستند. اسلات‌ها به شما امکان می‌دهند که بخش‌هایی از محتوا را از کامپوننت والد به کامپوننت فرزند ارسال کنید و به این ترتیب، جداسازی بین منطق و نمایش (Logic vs Presentation) برقرار شود. این مفهوم با اصول برنامه‌نویسی شیءگرا (OOP) هماهنگ است و کمک می‌کند تا کامپوننت‌ها ماژولار و قابل نگهداری باقی بمانند.
استفاده از اسلات‌ها در ویو جی‌اس معمولاً زمانی است که می‌خواهید محتوا یا layout یک کامپوننت را به صورت داینامیک تعیین کنید؛ مانند کارت‌ها (Card)، مدال‌ها (Modal) یا فرم‌های پویا. ویو جی‌اس سه نوع اصلی اسلات را ارائه می‌دهد: اسلات پیش‌فرض (Default Slot)، اسلات نام‌گذاری شده (Named Slot) و اسلات با داده (Scoped Slot). اسلات پیش‌فرض زمانی کاربرد دارد که محتوای والد ارسال نشده باشد، اسلات‌های نام‌گذاری شده اجازه می‌دهند چند بخش محتوایی مجزا تعریف شود، و Scoped Slot داده‌ای از فرزند به والد ارسال می‌کند تا رندر پویا امکان‌پذیر شود.
با مطالعه این آموزش، کاربران یاد خواهند گرفت چگونه از اسلات‌های پیش‌فرض، نام‌گذاری شده و Scoped استفاده کنند، کامپوننت‌های ماژولار و قابل نگهداری بسازند و این مفاهیم را در پروژه‌های واقعی ویو جی‌اس با رعایت بهترین شیوه‌ها و بهینه‌سازی‌ها پیاده‌سازی کنند.
مثال پایه <template>
text<div class="card">
<slot>
محتوای پیش‌فرض: هیچ محتوایی از والد ارسال نشده است.
</slot>
</div>
</template>
<script>
export default {
name: "BaseCard"
};
</script>
<style scoped>
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
<!-- استفاده -->
<BaseCard>
<p>این محتوای ارسال شده از والد است.</p>
</BaseCard>در مثال بالا، کامپوننت BaseCard شامل یک اسلات پیش‌فرض
تگ
مثال کاربردی <template>
text<div class="modal">
<header class="modal-header">
<slot name="header">
<h2>عنوان پیش‌فرض</h2>
</slot>
</header>
<section class="modal-body">
<slot :user="userData">
<p>پیام پیش‌فرض</p>
</slot>
</section>
<footer class="modal-footer">
<slot name="footer">
<button @click="closeModal">بستن</button>
</slot>
</footer>
</div>
</template>
<script>
export default {
name: "UserModal",
data() {
return {
userData: { name: "علی رضایی", role: "Admin" }
};
},
methods: {
closeModal() {
console.log("مدال بسته شد");
}
}
};
</script>
<style scoped>
.modal { border: 1px solid #333; padding: 20px; border-radius: 10px; background: #f9f9f9; }
.modal-header, .modal-footer { padding: 10px; background: #eee; }
</style>
<!-- استفاده -->
<UserModal>
<template #header>
<h1>جزئیات کاربر</h1>
</template>
<template #default="{ user }"> <p>نام: {{ user.name }}</p> <p>نقش: {{ user.role }}</p> </template>
<template #footer>
<button @click="customClose">بستن سفارشی</button> </template> </UserModal>در این مثال، از اسلات‌های نام‌گذاری شده (#header و #footer) و یک Scoped Slot (#default="{ user }") استفاده شده است. اسلات‌های نام‌گذاری شده به والد اجازه می‌دهند بخش‌های خاصی از UI را سفارشی کند، در حالی که Scoped Slot داده‌ای از فرزند به والد منتقل می‌کند تا رندر پویا امکان‌پذیر شود.
این الگو در فرم‌های پویا، مدال‌ها و کارت‌های داده کاربرد دارد و منطق و نمایش را جدا می‌کند. استفاده صحیح از v-slot و # syntax باعث خوانایی و maintainability بهتر template می‌شود. بهینه‌سازی DOM با v-if و v-for از عملیات اضافی جلوگیری کرده و کارایی را افزایش می‌دهد.
بهترین شیوه‌ها و اشتباهات رایج در استفاده از اسلات‌ها در ویو جی‌اس:
- به اسلات‌ها نام‌های واضح و semantic بدهید.
- از رندر مستقیم محتوای بزرگ dynamic بدون بهینه‌سازی خودداری کنید.
- داده‌های Scoped Slot را قبل از استفاده بررسی کنید.
- استفاده بهینه از v-if و v-for برای کاهش عملیات DOM.
- از تزریق مستقیم HTML برای جلوگیری از خطر XSS پرهیز کنید.
- از Vue DevTools برای debug کردن جریان داده و محتوای اسلات استفاده کنید.
- منطق پیچیده را در اسلات‌ها نگنجانید و اصل Single Responsibility را رعایت کنید.
📊 جدول مرجع
| ویو جی‌اس (Vue.js) Element/Concept | Description | Usage Example |
|---|---|---|
| slot | نقطه واردسازی محتوای والد | <slot>محتوای پیش‌فرض</slot> |
| Named Slot | چندین بخش محتوایی مجزا | <slot name="header">عنوان پیش‌فرض</slot> |
| Scoped Slot | انتقال داده از فرزند به والد | <slot :user="userData"></slot> |
| #slot | شورت‌کات برای اسلات‌های نام‌گذاری شده | <template #footer>دکمه</template> |
| v-slot | سینتکس مدرن برای Named و Scoped Slots | <template v-slot:default="{ user }">{{ user.name }}</template> |
یادگیری اسلات‌ها برای ساخت کامپوننت‌های ماژولار و قابل سفارشی‌سازی در ویو جی‌اس حیاتی است. مفاهیم اصلی شامل اسلات پیش‌فرض، نام‌گذاری شده و Scoped است که امکان انتقال داده از فرزند به والد و رندر پویا را فراهم می‌کنند.
این مفاهیم با مدیریت state (Vuex/Pinia)، رندر کامپوننت‌های پویا و Composition API به صورت یکپارچه ترکیب می‌شوند. در کاربردهای عملی مانند مدال‌ها، لیست‌های کارت و فرم‌های dynamic، رعایت بهترین شیوه‌ها باعث افزایش کارایی، maintainability و امنیت می‌شود. برای ادامه یادگیری، مطالعه مستندات رسمی Vue.js و مثال‌های واقعی توصیه می‌شود.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود