Vue.js, modern ve reaktif kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in pop\u00fcler bir JavaScript \u00e7er\u00e7evesidir. Bile\u015fen tabanl\u0131 mimarisi, kodun yeniden kullan\u0131labilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131rken, bazen bile\u015fenlerimizin i\u00e7eri\u011fini daha dinamik ve esnek bir \u015fekilde y\u00f6netme ihtiyac\u0131 do\u011far. \u0130\u015fte tam bu noktada Vue.js’in “slot” (yuva) \u00f6zelli\u011fi devreye girer. Slotlar, bir bile\u015fenin i\u00e7eri\u011fini, o bile\u015feni kullanan \u00fcst bile\u015fen (parent component) taraf\u0131ndan \u00f6zelle\u015ftirilebilmesine olanak tan\u0131r. Bu makalede, Vue.js’teki bile\u015fen slotlar\u0131n\u0131n ne oldu\u011funu, neden kullan\u0131ld\u0131\u011f\u0131n\u0131 ve farkl\u0131 t\u00fcrlerini (temel, adland\u0131r\u0131lm\u0131\u015f, kapsaml\u0131) ayr\u0131nt\u0131l\u0131 \u00f6rneklerle ele alaca\u011f\u0131z.<\/p>\n
Vue.js’te her bile\u015fen, belirli bir i\u015flevselli\u011fi ve g\u00f6r\u00fcn\u00fcm\u00fc kapsayan ba\u011f\u0131ms\u0131z bir birimdir. \u00d6rne\u011fin, bir Diyelim ki bir \u0130\u015fte bu noktada slotlar devreye girer. Slotlar, bir bile\u015fen i\u00e7inde “bo\u015fluklar” veya “yer tutucular” tan\u0131mlaman\u0131za olanak tan\u0131r. Bu bo\u015fluklar, bile\u015feni kullanan \u00fcst bile\u015fen taraf\u0131ndan doldurulur. Bu, bile\u015fenlerinizi daha esnek, yeniden kullan\u0131labilir ve \u00f6zelle\u015ftirilebilir hale getirir. Bir bile\u015feni bir ev olarak d\u00fc\u015f\u00fcn\u00fcrseniz, slotlar o evin pencereleri, kap\u0131lar\u0131 veya farkl\u0131 odalar\u0131 gibidir; evin genel yap\u0131s\u0131 sabittir, ancak bu bo\u015fluklar\u0131 istedi\u011finiz gibi doldurabilirsiniz.<\/p>\n Slotlar, bile\u015fenlerin sorumluluklar\u0131n\u0131 ay\u0131rman\u0131n (separation of concerns) harika bir yoludur: Bu sayede, ayn\u0131 Temel slotlar, bir bile\u015fenin tek bir ana i\u00e7erik blo\u011funu \u00fcst bile\u015fenden almas\u0131 gereken durumlarda kullan\u0131l\u0131r. Bunlara “varsay\u0131lan slotlar” veya “isimsiz slotlar” da denir \u00e7\u00fcnk\u00fc belirli bir isimleri yoktur.<\/p>\n 1. \u00c7ocuk Bile\u015fende (Button<\/code> bile\u015feni, bir Card<\/code> bile\u015feni veya bir Modal<\/code> bile\u015feni olu\u015fturabilirsiniz. Ancak bazen, bir bile\u015fenin genel yap\u0131s\u0131n\u0131 korurken, i\u00e7indeki baz\u0131 k\u0131s\u0131mlar\u0131n d\u0131\u015far\u0131dan belirlenmesini isteyebiliriz.<\/p>\nCard<\/code> bile\u015feniniz var. Bu kart\u0131n her zaman bir ba\u015fl\u0131\u011f\u0131 ve bir g\u00f6vdesi olmas\u0131n\u0131 istiyorsunuz, ancak g\u00f6vde i\u00e7eri\u011finin veya ba\u015fl\u0131\u011f\u0131n tam olarak ne olaca\u011f\u0131, kart\u0131 kulland\u0131\u011f\u0131n\u0131z yere g\u00f6re de\u011fi\u015febilir. E\u011fer bu i\u00e7eri\u011fi props (\u00f6zellikler) arac\u0131l\u0131\u011f\u0131yla ge\u00e7irmeye \u00e7al\u0131\u015f\u0131rsan\u0131z, k\u0131sa metinler i\u00e7in sorun olmayabilir, ancak daha karma\u015f\u0131k HTML yap\u0131lar\u0131 veya birden fazla farkl\u0131 i\u00e7erik blo\u011fu i\u00e7in props kullanmak hantal ve y\u00f6netilemez hale gelebilir.<\/p>\n
\n* Child Component (\u00c7ocuk Bile\u015fen):<\/strong> Bile\u015fenin genel yap\u0131s\u0131n\u0131, d\u00fczenini ve stilini tan\u0131mlar. \u0130\u00e7erik i\u00e7in yer tutucular\u0131 (
\n* Parent Component (\u00dcst Bile\u015fen):<\/strong> \u00c7ocuk bile\u015feni kullan\u0131r ve slot yer tutucular\u0131na hangi i\u00e7eri\u011fin yerle\u015ftirilece\u011fini belirler.<\/p>\nCard<\/code> bile\u015fenini farkl\u0131 i\u00e7eriklerle bir\u00e7ok farkl\u0131 yerde kullanabilir, ancak her bir kart\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 merkezi olarak Card<\/code> bile\u015feninde y\u00f6netebilirsiniz.<\/p>\nTemel Slotlar (Varsay\u0131lan Slotlar)<\/h3>\n
Kullan\u0131m \u015eekli<\/h4>\n
ChildComponent.vue<\/code>):<\/strong>
\nBir \n\n Kart Ba\u015fl\u0131\u011f\u0131<\/h3>\n <\/div>\n