Vue.js, bile\u015fen tabanl\u0131 mimarisiyle karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini y\u00f6netmeyi kolayla\u015ft\u0131ran g\u00fc\u00e7l\u00fc bir JavaScript \u00e7er\u00e7evesidir. Bu mimarinin \u00f6nemli bir y\u00f6n\u00fc, bile\u015fenlerin kendi kendini tekrar eden veya \u00f6zyinelemeli yap\u0131lar olu\u015fturabilmesidir. A\u011fa\u00e7 g\u00f6r\u00fcn\u00fcmleri, yorum dizileri, i\u00e7 i\u00e7e ge\u00e7mi\u015f men\u00fcler veya dosya sistemleri gibi hiyerar\u015fik verileri temsil ederken \u00f6zyinelemeli bile\u015fenler vazge\u00e7ilmezdir. Ancak, bu t\u00fcr derinlemesine i\u00e7 i\u00e7e ge\u00e7mi\u015f yap\u0131lar i\u00e7inde bile\u015fenler aras\u0131 ileti\u015fim kurmak, standart Vue.js ileti\u015fim mekanizmalar\u0131n\u0131n (props ve olaylar) s\u0131n\u0131rlar\u0131n\u0131 zorlayabilir ve yeni zorluklar ortaya \u00e7\u0131karabilir.<\/p>\n
Bu makalede, Vue.js’te \u00f6zyinelemeli bile\u015fenler aras\u0131nda etkili ve s\u00fcrd\u00fcr\u00fclebilir ileti\u015fim kurmak i\u00e7in \u00e7e\u015fitli stratejileri ve en iyi uygulamalar\u0131 derinlemesine inceleyece\u011fiz. Temel Bir Vue bile\u015feninin \u00f6zyinelemeli olabilmesi i\u00e7in, kendi \u015fablonunda kendisini \u00e7a\u011f\u0131rmas\u0131 gerekir. Bu, bir bile\u015fenin kendi i\u00e7inde bir ba\u015fka \u00f6rne\u011fini olu\u015fturdu\u011fu anlam\u0131na gelir.<\/p>\n \u00d6zyinelemeli bile\u015fenler, genellikle a\u011fa\u00e7 benzeri veri yap\u0131lar\u0131n\u0131 g\u00f6rselle\u015ftirmek veya y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir klas\u00f6r yap\u0131s\u0131n\u0131, i\u00e7 i\u00e7e ge\u00e7mi\u015f yorumlar\u0131 veya bir kategori hiyerar\u015fisini d\u00fc\u015f\u00fcn\u00fcn. Her bir “d\u00fc\u011f\u00fcm” veya “\u00f6\u011fe” ayn\u0131 bile\u015fen taraf\u0131ndan temsil edilir ve bu bile\u015fen, kendi alt d\u00fc\u011f\u00fcmlerini de ayn\u0131 bile\u015feni kullanarak render eder.<\/p>\n Bu yap\u0131y\u0131 etkin bir \u015fekilde kullanabilmek i\u00e7in Vue’da baz\u0131 \u00f6zel ayarlamalar gereklidir:<\/p>\n 1. A\u015fa\u011f\u0131da, basit bir a\u011fa\u00e7 yap\u0131s\u0131n\u0131 temsil eden \u00f6zyinelemeli bir props<\/code> ve emit<\/code> yakla\u015f\u0131mlar\u0131ndan ba\u015flayarak, provide\/inject<\/code>, olay veri yollar\u0131 (event bus), merkezi durum y\u00f6netimi (Vuex\/Pinia) ve Composition API’nin sundu\u011fu geli\u015fmi\u015f y\u00f6ntemlere kadar geni\u015f bir yelpazeyi ele alaca\u011f\u0131z. Amac\u0131m\u0131z, uygulaman\u0131z\u0131n karma\u015f\u0131kl\u0131\u011f\u0131na ve ihtiya\u00e7lar\u0131na en uygun ileti\u015fim desenini se\u00e7menize yard\u0131mc\u0131 olacak kapsaml\u0131 bir rehber sunmakt\u0131r.<\/p>\n\u00d6zyinelemeli Bile\u015fenleri Anlamak<\/h3>\n
\u00d6zyinelemeli Bile\u015fen Nedir?<\/h4>\n
name<\/code> \u00d6zelli\u011fi:<\/strong> Bir bile\u015fenin kendi \u015fablonunda kendisini \u00e7a\u011f\u0131rabilmesi i\u00e7in a\u00e7\u0131k\u00e7a bir name<\/code> \u00f6zelli\u011fine sahip olmas\u0131 gerekir. Vue, bu name<\/code> \u00f6zelli\u011fini kullanarak bile\u015fenin kendisini tan\u0131mas\u0131n\u0131 sa\u011flar.
\n2. Durdurma Ko\u015fulu:<\/strong> Sonsuz d\u00f6ng\u00fcye girmemek i\u00e7in \u00f6zyinelemeli bile\u015fenlerin bir “durdurma ko\u015fulu” olmas\u0131 gerekir. Genellikle bu, bir d\u00fc\u011f\u00fcm\u00fcn alt \u00f6\u011fesi kalmad\u0131\u011f\u0131nda veya belirli bir derinli\u011fe ula\u015f\u0131ld\u0131\u011f\u0131nda \u00f6zyinelemenin sona ermesi anlam\u0131na gelir.<\/p>\nTemel Bir Uygulama \u00d6rne\u011fi<\/h4>\n
TreeItem<\/code> bile\u015feni \u00f6rne\u011fi bulunmaktad\u0131r:<\/p>\n\n\n \n