Vue-də slotlar haqqında danış: onları necə istifadə etdin, o cümlədən scoped slots?

Vue-da slotlar, ana komponentdən uşaqlara məzmun ötürmək üçün istifadə olunur və bu, daha çevik və təkrar istifadə oluna bilən komponentlər yaratmağa imkan verir.

Adi slotlar istənilən HTML və ya komponentləri uşaqlara daxil etməyə imkan verir:

<ChildComponent>
  <p>Slot üçün məzmun</p>
</ChildComponent>

Uşaq komponentdə:

<template>
  <div>
    <slot></slot>
  </div>
</template>

Scoped slots slot vasitəsilə uşaqlardan valideynə məlumat ötürməyə imkan verir və bu, dinamik göstəriş üçün faydalıdır.

Scoped slot istifadəsinin nümunəsi:

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return { user: { name: 'Ivan', age: 30 } };
  }
}
</script>

Valideyn komponentdə:

<ChildComponent v-slot:default="slotProps">
  <p>Ad: {{ slotProps.user.name }}</p>
  <p>Yaş: {{ slotProps.user.age }}</p>
</ChildComponent>

Beləliklə, scoped slots uşaqlara komponentin göstərmə məntiqinin bir hissəsini valideynə həvalə etməyə imkan verir və komponentləri daha universal edir.