{"id":7751,"date":"2024-12-26T17:15:11","date_gmt":"2024-12-26T14:15:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/svelte-4ten-svelte-5e-slotlar-varsayilan-ve-adlandirilmis\/"},"modified":"2024-12-26T17:15:11","modified_gmt":"2024-12-26T14:15:11","slug":"svelte-4ten-svelte-5e-slotlar-varsayilan-ve-adlandirilmis","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/svelte-4ten-svelte-5e-slotlar-varsayilan-ve-adlandirilmis\/","title":{"rendered":"Svelte 4’ten Svelte 5’e: Slot’lar (Varsay\u0131lan ve Adland\u0131r\u0131lm\u0131\u015f)"},"content":{"rendered":"

Svelte 4’ten Svelte 5’e: Slot’lar (Varsay\u0131lan ve Adland\u0131r\u0131lm\u0131\u015f)<\/p>\n

Svelte, performans odakl\u0131 bir JavaScript \u00e7er\u00e7evesi olarak biliniyor. Svelte 4’ten Svelte 5’e ge\u00e7i\u015f, geli\u015ftiriciler i\u00e7in bir\u00e7ok yenilik getirdi. Bu yeniliklerden biri de slot’lardaki iyile\u015ftirmeler. Bu makalede, Svelte’de varsay\u0131lan ve adland\u0131r\u0131lm\u0131\u015f slot’lar\u0131n nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, Svelte 4 ile Svelte 5 aras\u0131ndaki farklar\u0131 ve bunlar\u0131n uygulamada nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Varsay\u0131lan Slot’lar<\/h2>\n

Varsay\u0131lan slot’lar, bir bile\u015fenin i\u00e7eri\u011fini yerle\u015ftirmek i\u00e7in kullan\u0131lan en basit slot t\u00fcr\u00fcd\u00fcr. \u00d6rne\u011fin, bir kart bile\u015feni d\u00fc\u015f\u00fcnelim. Bu kart\u0131n i\u00e7eri\u011fini, yani ba\u015fl\u0131k, metin ya da g\u00f6rselleri, varsay\u0131lan slot ile ekleyebiliriz. Svelte 4 ve Svelte 5’te varsay\u0131lan slot kullan\u0131m\u0131 ayn\u0131d\u0131r. A\u015fa\u011f\u0131da basit bir \u00f6rnek yer almaktad\u0131r:<\/p>\n

\n<script>\n  export let title;\n<\/script>\n\n<div class=\"card\">\n  <h2>{title}<\/h2>\n  <slot \/>\n<\/div>\n<\/code><\/pre>\n
Bu \u00f6rnekte, <slot \/><\/code> etiketi, varsay\u0131lan slot’u temsil eder.  Buraya eklenen her \u015fey, kart\u0131n i\u00e7eri\u011fi olarak g\u00f6r\u00fcnt\u00fclenecektir.  \u00d6rne\u011fin,  bu bile\u015feni \u015fu \u015fekilde kullanabiliriz:<\/p>\n
\n<Kart title=\"\u00d6nemli Bilgi\">\n  <p>Buraya kart\u0131n i\u00e7eri\u011fini yazabiliriz.<\/p>\n<\/Kart>\n<\/code><\/pre>\n
Adland\u0131r\u0131lm\u0131\u015f Slot’lar<\/h2>\n
Adland\u0131r\u0131lm\u0131\u015f slot’lar, daha karma\u015f\u0131k bile\u015fenler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.  Bu slot’lar, bile\u015fenin farkl\u0131 b\u00f6l\u00fcmlerine i\u00e7erik eklemenizi sa\u011flar.  \u00d6rne\u011fin, bir kart bile\u015feni i\u00e7in ayr\u0131 ayr\u0131 ba\u015fl\u0131k, i\u00e7erik ve alt k\u0131s\u0131m slot’lar\u0131 tan\u0131mlayabiliriz.  Bu, bile\u015fenimizin daha mod\u00fcler ve d\u00fczenli olmas\u0131n\u0131 sa\u011flar.  Svelte 5, adland\u0131r\u0131lm\u0131\u015f slot’lar\u0131n kullan\u0131m\u0131n\u0131 daha da kolayla\u015ft\u0131rm\u0131\u015ft\u0131r.  A\u015fa\u011f\u0131daki \u00f6rnekte, bir kart bile\u015feni i\u00e7in adland\u0131r\u0131lm\u0131\u015f slot’lar kullan\u0131lm\u0131\u015ft\u0131r:<\/p>\n
\n<script>\n  export let title;\n<\/script>\n\n<div class=\"card\">\n  <h2>{title}<\/h2>\n  <slot name=\"icerik\" \/>\n  <slot name=\"alt\" \/>\n<\/div>\n<\/code><\/pre>\n
Bu \u00f6rnekte,  “icerik” ve “alt” adl\u0131 iki slot tan\u0131mlad\u0131k.  Bu slot’lar\u0131 kullanarak, kart bile\u015feninin farkl\u0131 k\u0131s\u0131mlar\u0131na i\u00e7erik ekleyebiliriz:<\/p>\n
\n<Kart title=\"\u00d6nemli Bilgi\">\n  <p slot=\"icerik\">Bu, kart\u0131n ana i\u00e7eri\u011fidir.<\/p>\n  <a slot=\"alt\" href=\"#\">Daha Fazla Bilgi<\/a>\n<\/Kart>\n<\/code><\/pre>\n
Bu, Svelte 5’te adland\u0131r\u0131lm\u0131\u015f slot kullan\u0131m\u0131n\u0131n ne kadar esnek oldu\u011funu g\u00f6sterir.  Ayr\u0131ca, varsay\u0131lan slot ile birlikte adland\u0131r\u0131lm\u0131\u015f slotlar\u0131 da kullanabiliriz. Bu, bile\u015fenin daha \u00f6zelle\u015ftirilebilir olmas\u0131n\u0131 sa\u011flar.  Bu \u00f6zellik, Svelte 4’te de mevcuttu, ancak Svelte 5 ile birlikte kullan\u0131m daha da kolayla\u015ft\u0131r\u0131ld\u0131 ve geli\u015ftirildi.<\/p>\n
Svelte 4 ve Svelte 5 Aras\u0131ndaki Farklar<\/h2>\n
Svelte 4 ve Svelte 5 aras\u0131ndaki slot kullan\u0131m\u0131 bak\u0131m\u0131ndan temel fark, Svelte 5’in slot kullan\u0131m\u0131n\u0131 daha temiz ve sezgisel hale getirmi\u015f olmas\u0131d\u0131r.  Svelte 4’te, adland\u0131r\u0131lm\u0131\u015f slot’lar biraz daha karma\u015f\u0131k bir \u015fekilde y\u00f6netiliyordu. Svelte 5 ise bu karma\u015f\u0131kl\u0131\u011f\u0131 azaltarak, daha okunabilir ve anla\u015f\u0131l\u0131r bir kod yap\u0131s\u0131 sa\u011flad\u0131.  Sonu\u00e7 olarak,  Svelte 5’te slot’lar\u0131 kullanmak hem daha kolay hem de daha verimli hale geldi. <\/p>\n
Sonu\u00e7<\/h2>\n
Svelte’deki slot’lar, \u00f6zellikle tekrar kullan\u0131labilir bile\u015fenler olu\u015ftururken olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.  Varsay\u0131lan ve adland\u0131r\u0131lm\u0131\u015f slot’lar\u0131 anlamak, Svelte uygulamalar\u0131n\u0131z\u0131n daha mod\u00fcler, esnek ve d\u00fczenli bir yap\u0131ya sahip olmas\u0131n\u0131 sa\u011flayacakt\u0131r.  Svelte 5’in slot’lara getirdi\u011fi iyile\u015ftirmeler ise geli\u015ftirme s\u00fcrecini kolayla\u015ft\u0131rmakta ve daha temiz bir kod yaz\u0131m\u0131na olanak tan\u0131maktad\u0131r.  Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.  Ayr\u0131ca, Svelte’nin resmi dok\u00fcmanlar\u0131na da g\u00f6z atman\u0131z\u0131 \u00f6neririm. <\/p>\n
Faydal\u0131 bulabilece\u011finiz di\u011fer kaynaklar:<\/p>\n