نحوه استفاده مجدد از کامپوننت های Vue با اسلات ها

شما همه چیز را در مورد جداسازی نگرانی ها می دانید، و اجزای خود را به قطعات قابل مدیریت تقسیم کرده اید، اما چگونه می توانند به طور موثر ارتباط برقرار کنند؟

Vue راه های مختلفی را ارائه می دهد که اجزا می توانند با یکدیگر ارتباط برقرار کنند. این ارتباط می تواند بین دو مؤلفه نامرتبط یا بین مؤلفه والد و فرزند باشد. Vue با ویژگی هایی از جمله props، ارائه/تزریق و اسلات به این مهم دست می یابد.

نحوه استفاده از اسلات ها برای اجازه دادن به مؤلفه های والد و فرزند برای برقراری ارتباط در برنامه های Vue را بیاموزید.

اسلات ها چیست؟

اسلات‌ها در Vue به‌عنوان متغیرهایی در قالب یک جزء فرزند عمل می‌کنند. این متغیرها به شما این امکان را می دهند که محتوا را از مولفه های والد به فرزند به صورت پویا منتقل کنید.

مشابه ابزارهایی که داده‌ها و عملکردها را از مؤلفه‌های والد به فرزند منتقل می‌کنند، اسلات‌ها به شما امکان می‌دهند محتوای الگو را از مؤلفه‌های اصلی به فرزند منتقل کنید. این به شما امکان می دهد اجزای قابل استفاده مجدد بیشتری با محتوای HTML مختلف ایجاد کنید.

نحو اساسی اسلات ها

Vue به دلیل توانایی خود در بهبود HTML با برچسب های سفارشی که به شما امکان می دهد به سرعت برنامه های کاربردی وب منعطف بسازید مشهور است. اسلات ها نیز از این قاعده مستثنی نیستند. در Vue، یک تگ اسلات منحصربه‌فرد به شما امکان می‌دهد متغیرهایی را در مؤلفه‌های فرزند تنظیم کنید تا محتوای HTML را تزریق کنید.

برای تعریف یک اسلات در مولفه فرزند Vue، از عنصر درون قالب کامپوننت استفاده کنید. این مثال اساسی را در نظر بگیرید:

<!-- ChildComponent.vue -->
<template>
<div>
    <slot></slot>
</div>
</template>

این مثال یک جزء ساده Vue را نشان می دهد که حاوی یک اسلات است. می توانید محتوا را از یک مؤلفه والد به شکاف این مؤلفه فرزند منتقل کنید. وقتی Vue مولفه فرزند را رندر می‌کند، این محتوا جایگزین عنصر اسلات می‌شود.

برای استفاده از اسلات، محتوا را از مؤلفه والد به مؤلفه فرزند ارسال کنید:

<!-- ParentComponent -->
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

<template>
<ChildComponent>
  <h1>This is the child component</h1>
</ChildComponent>

<div>
  <h3>This is the parent component</h3>
</div>
</template>

بلوک کد بالا یک مؤلفه والد را نشان می دهد که مؤلفه فرزند را از قبل وارد و استفاده می کند. کامپوننت فرزند پیام “This is the child component” را در تگ های h1 می گیرد و جای جای نگهدار را با این پیام جایگزین می کند.

اسلات ها به شما امکان می دهند ساختارهای چیدمان را تعریف کنید و اجزای پیچیده را با شکاف در بلوک های محتوای مختلف بسازید. این به ویژه زمانی مفید است که اجزای رابط کاربری قابل استفاده مجدد را ایجاد می کنید یا طرح بندی هایی با بخش های قابل تعویض ایجاد می کنید.

اسلات های خود را برای استفاده بیش از یک نام ببرید

هنگامی که با اجزای مختلف کار می کنید، ممکن است لازم باشد بیش از یک شکاف در یک کودک تعریف کنید. این ممکن است به این دلیل باشد که جزء فرزند شما می‌تواند بخش‌های مختلفی مانند سرصفحه و پاورقی یا عنوان کارت و متن داشته باشد.

Vue به شما امکان می دهد اسلات ها را با نام تعریف کنید تا در هنگام ارسال محتوا از مؤلفه والد به یک شکاف خاص اشاره کنید.

مثلا:

<!-- ChildComponent.vue -->
<template>
  <div class="card">
    <div class="card-title">
      <slot name="title"></slot>
    </div>

    <div class="card-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
  
<style>
.card {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}
  
.card-title {
  font-weight: bold;
  margin-bottom: 10px;
}
  
.card-body {
  margin-bottom: 10px;
}
</style>

بلوک کد بالا یک جزء فرزند را نشان می دهد که یک کارت را نشان می دهد. این جزء کارت دو اسلات را با دو ویژگی نام تعریف می کند: عنوان و بدن. شما می توانید به هر یک از این اسلات ها مراجعه کنید و محتوا را به صورت جداگانه به آنها منتقل کنید.

برای ارسال محتوا به اسلات های نامگذاری شده، از دستور v-slot در جزء اصلی استفاده کنید:

<!-- ParentComponent -->
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script>

<template>
  <div>
    <ChildComponent>
      <template v-slot:title>
        <h2>This is the Card Title</h2>
      </template>
      <template v-slot:body>
        <p>This is the Card Body Content.</p>
        <p>It can include multiple paragraphs or any other HTML content.</p>
      </template>
    </ChildComponent>
  </div>
</template>

این مؤلفه والد از مؤلفه فرزند استفاده می کند و محتوا را برای عنوان و متن کارت پاس می کند. Vue محتوای درون بلوک‌های الگو را به شکاف‌های مربوطه در مؤلفه فرزند تزریق می‌کند.

مانند دستورالعمل های دیگر در Vue، مانند دستور v-for برای ارائه لیست، شما باید دستور v-slot را به یک تگ HTML متصل کنید. معمولاً باید آن را به یک برچسب الگو وصل کنید.

مانند سایر دستورات Vue، v-slot یک مخفف دارد: نماد #.

<template #title>
  <h2>This is the Card Title</h2>
</template>

محتوای پیش‌فرض برای اسلات

می‌توانید اسلات‌هایی را با محتوای پیش‌فرض تعریف کنید که وقتی هیچ کدام را از مؤلفه اصلی ارسال نکنید، نمایش داده می‌شوند. شما می توانید به سادگی با قرار دادن محتوا در عنصر اسلات به این هدف برسید.

مثلا:

<template>
  <div>
    <slot>
      <p>Default content for the slot.</p>
    </slot>
  </div>
</template>

در این مثال، اگر مؤلفه والد هیچ محتوایی برای اسلات ارائه ندهد، Vue محتوای HTML را روی محتوای مؤلفه فرزند تنظیم می‌کند.

نحوه استفاده از اسلات های Scoped

اسلات های محدوده به شما امکان می دهند از داده های مؤلفه فرزند هنگام تزریق محتوای HTML از مؤلفه والد استفاده کنید. زمانی که نیاز دارید داده‌هایی را که در مؤلفه فرزند تعریف کرده‌اید ارائه کنید، بسیار مفید است.

در اینجا نمونه ای از نحوه استفاده از اسلات های محدوده دار آورده شده است:

<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";

const value = ref("David");

const age = ref(21);
</script>

<template>
  <div>
    <slot :value="value" :age="age"> </slot>
  </div>
</template>

این مؤلفه فرزند دو متغیر را تعریف می کند: یک مقدار که یک نام را نشان می دهد و یک سن که نشان دهنده یک عدد است. سپس این مثال یک اسلات تعریف می‌کند و این دو متغیر را ارسال می‌کند، مشابه نحوه استفاده از props هنگام ایجاد اجزای Vue.

اکنون می توانید با پیوست کردن دستور v-slot به تگ مؤلفه فرزند، به این متغیرها از مؤلفه والد دسترسی پیدا کنید:

<!-- ParentComponent -->
<script setup>
import ChildComponent from './components/ChildComponent.vue';
</script>

<template>
  <div>
  <ChildComponent v-slot="slotProps">
    {{ slotProps.value }} is {{ slotProps.age }} years old.
  </ChildComponent>
  </div>
</template>

دستور v-slot متصل به تگ ChildComponent به این مؤلفه والد اجازه می دهد تا داده ها را از مؤلفه فرزند دریافت کند و از آن در محتوای اسلات استفاده کند. شی slotProps نشان دهنده داده های مشترک است.

در محتوای اسلات، {{ slotProps.value }} و {{ slotProps.age }} داده های به اشتراک گذاشته شده را با درون یابی نمایش می دهند، تکنیکی برای اتصال داده ها در Vue.

هنگام کار با اسلات های نامگذاری شده، دستور v-slot را به یک تگ الگو وصل کنید. مثلا:

<!-- ParentComponent -->
<script setup>
import ChildComponent from "./components/ChildComponent.vue";
</script>

<template>
  <div>
    <ChildComponent>
      <template #title="titleProps">
        <h2>{{ titleProps.title }}</h2>
      </template>
      <template #body="bodyProps">
        <p>{{ bodyProps.body }}</p>
      </template>
    </ChildComponent>
  </div>
</template>

بلوک کد بالا، استفاده یک مؤلفه والد از مؤلفه فرزند را توصیف می کند. مؤلفه والد دستور v-slot را به دو تگ الگو وصل می‌کند و از کوتاه‌نویسی برای نام‌گذاری استفاده می‌کند. دستورالعمل های v-slot به مؤلفه والد اجازه می دهد تا از داده های مؤلفه فرزند هنگام ارائه محتوای HTML استفاده کند.

اکنون، مؤلفه فرزندی را که مؤلفه والد در بلوک کد زیر استفاده می کند، در نظر بگیرید:

<!-- ChildComponent.vue -->
<script setup>
import { ref } from "vue";
const cardTitle = ref("This is the card title.");
const cardBody = ref("This is the card body content.");
</script>

<template>
  <div class="card">
    <div class="card-title">
      <slot name="title" :title="cardTitle"></slot>
    </div>
    <div class="card-body">
      <slot name="body" :body="cardBody"></slot>
    </div>
  </div>
</template>

این مؤلفه فرزند از اسلات های نامگذاری شده برای متمایز کردن آنها استفاده می کند. Vue ویژگی نام را به عنوان یک شناسه منحصر به فرد برای تگ اسلات ذخیره می کند. مؤلفه فرزند عنوان و صفات بدنه را به مؤلفه والد منتقل می کند.

اسلات ها تنها ویژگی جزء Vue نیستند

اسلات ها یک ویژگی قدرتمند در Vue هستند که به شما امکان می دهد اجزای قابل استفاده مجدد با محتوای قابل تنظیم ایجاد کنید. با درک نحو و استفاده از اسلات ها، می توانید برنامه های Vue.js انعطاف پذیرتر و ماژولارتری بسازید.

Vue سایر ویژگی‌های کامپوننت، مانند composables و props برای ارتباط اجزا را فراهم می‌کند. به عنوان یک توسعه دهنده Vue، داشتن دانش پیشرفته از این ویژگی ها ضروری است.

منبع مقاله