Vue — $slots ($slots)

آخرین بروزرسانی: 1404/08/21

قبلی: $root ($root) بعدی: $emit() ($emit())

$slots ($slots)

«اسلات ها در Vue» یعنی جای خالیِ محتوا که والد پر می کند. آبجکت $slots همه اسلات های ارسال شده از والد را نگه می دارد. سپس می توانیم وجود هر اسلات را چک کنیم. مثل زنگ تفریح که بعضی کلاس ها برنامه ویژه دارند.

تعریف و کاربرد $slots

آبجکت $slots نماینده اسلات های دریافتی از والد است. بنابراین با this.$slots همه اسلات ها دیده می شوند. همچنین با this.$slots.topSlot می توان اسلات نام دار topSlot را بررسی کرد. این بررسی برای نمایش شرطی محتوا بسیار مفید است.

نکته: اگر فقط جابه جایی داده می خواهی، از $props استفاده کن. اگر نیاز به دسترسی ریشه داری، صفحه $root را ببین. برای ارجاع به المنت ها نیز $refs کمک می کند.

مثال: چک کردن وجود اسلات نام دار

در مرحله mounted بررسی می کنیم که آیا والد اسلات topSlot را داده است یا نه. سپس پیام مناسب را در slotsText می گذاریم.

<script>
export default {
  data() {
    return {
      slotsText: "";
    };
  },
  mounted() {
    if (this.$slots.topSlot) {
      this.slotsText = "Content for the 'topSlot' slot is provided by the parent.";
    }
    else {
      this.slotsText = "Content for the 'topSlot' slot is NOT provided by the parent.";
    }
  }
};
<\/script>

مشاهده در ادیتور

راهنمای گام به گام کوتاه

نام اسلات را در والد تعیین کن.
در فرزند، this.$slots[name] را بررسی کن.
بر اساس نتیجه، نمایش را شرطی کن.

هشدار: با وجود مفیدبودن $slots، برای محتوای پیچیده بهتر است از v-slot در قالب ها استفاده کنی تا کد تمیزتر بماند.

جمع بندی سریع

$slots لیست اسلات های والد است.
با نام اسلات می توان بررسی کرد.
نمایش شرطی را ساده می کند.
برای الگوی تمیز، از v-slot کمک بگیر.