Slots ve scoped slots nedir?

Question

Accepted Answer

**Slots**, bir parent'in bir child bileşenine **şablon içeriğini** geçirmesine izin verir — bu, tüketicinin iç markaları kontrol ettiği esnek, yeniden kullanılabilir sarmalayıcılar (kartlar, modallar, düzenler) oluşturmanın yoludur. ## Temel slot ```vue ``` ```vue

Title

Any content!

``` Child bir "delik" (``) tanımlar; parent bunu istediği herhangi bir markayla doldurur. Bu, props aracılığıyla dizeleri geçirmekten çok daha esnektir. ## Adlandırılmış slotlar — çoklu ekleme noktaları ```vue ``` ```vue

Main content (default slot)

``` ## Scoped slotlar — child slot içeriğine VERİLERİ yukarıya iletir Bazen child'ın parent'in slot'unun ihtiyaç duyduğu veriler vardır (örn. listedeki her öğe). **Scoped slotlar** child'dan verileri parent'in şablonuna ortaya çıkarır: ```vue ``` ```vue ``` Scoped slotlar **renderless/headless bileşenler** için anahtardır: child mantığı (döngü, getirme, durum) işler ve parent'in sunumu tamamen kontrol etmesine izin verir. ## Neden önemli Slotlar Vue'nin içerik dağıtım mekanizmasıdır — yeniden kullanılabilir düzen ve sarmalayıcı bileşenleri için gereklidir. Adlandırılmış slotlar çoklu ekleme noktaları sağlar ve scoped slotlar (child verilerini parent tarafından tanımlanan şablonlara ortaya çıkarma) başsız bileşenler ve özelleştirilebilir listeler/tablolar gibi güçlü desenleri etkinleştirir. Bunlar, Vue bileşenlerini katı olmaktan ziyade bileşik yapar.