{"id":29969,"date":"2025-09-22T09:30:25","date_gmt":"2025-09-22T06:30:25","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/"},"modified":"2025-09-22T09:30:25","modified_gmt":"2025-09-22T06:30:25","slug":"vue-jsde-global-event-bus-kapsamli-bir-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/","title":{"rendered":"Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber"},"content":{"rendered":"

Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber<\/p>\n

Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js’de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js’de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.<\/p>\n

Vue.js’de Bile\u015fenler Aras\u0131 \u0130leti\u015fim: Neden Global Event Bus?<\/h2>\n

B\u00fcy\u00fck \u00f6l\u00e7ekli Vue.js projelerinde, bile\u015fenler aras\u0131nda veri al\u0131\u015fveri\u015fini y\u00f6netmek kritik \u00f6neme sahiptir. Props ve emit olaylar\u0131, basit senaryolarda etkilidir. Ancak, karma\u015f\u0131k uygulamalarda, \u00f6zellikle de birbirleriyle dolayl\u0131 olarak ili\u015fkili bile\u015fenler aras\u0131nda ileti\u015fim kurmak gerekti\u011finde, bu y\u00f6ntemler yetersiz kalabilir. Bu noktada, global event bus devreye girer. Bir global event bus, uygulaman\u0131zdaki t\u00fcm bile\u015fenlerin birbirleriyle kolayca ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan merkezi bir ileti\u015fim arac\u0131d\u0131r. Bu sayede, bile\u015fenler hiyerar\u015fik ili\u015fki olmadan birbirlerini etkileyebilirler. Global event bus kullanarak, karma\u015f\u0131k veri ak\u0131\u015flar\u0131n\u0131 y\u00f6netmeyi ve kodunuzun okunabilirli\u011fini art\u0131rmay\u0131 sa\u011flayabilirsiniz. \u00d6rne\u011fin, bir \u00fcr\u00fcn detay sayfas\u0131ndaki bir \u00fcr\u00fcn\u00fcn sepete eklendi\u011fini, farkl\u0131 bir bile\u015fendeki al\u0131\u015fveri\u015f sepeti sayac\u0131n\u0131 g\u00fcncellemek i\u00e7in kullanabilirsiniz. Bu, props ve emit olaylar\u0131yla \u00e7ok daha karma\u015f\u0131k bir \u015fekilde yap\u0131lmas\u0131 gerekirken, global event bus ile temiz ve anla\u015f\u0131l\u0131r bir \u015fekilde ger\u00e7ekle\u015ftirilebilir.<\/p>\n

Global Event Bus’\u0131 Anlamak: Temel Kavramlar<\/h2>\n

Global event bus, temelde bir olay yay\u0131mlay\u0131c\u0131-abone sistemi olarak \u00e7al\u0131\u015f\u0131r. Bile\u015fenler, belirli bir olay\u0131 dinleyebilir (abone olabilir) ve o olay tetiklendi\u011finde (yay\u0131mland\u0131\u011f\u0131nda) bir fonksiyon \u00e7al\u0131\u015ft\u0131rabilirler. Vue.js’te, bu genellikle Vue \u00f6rne\u011fi veya bir Vue bile\u015feni kullan\u0131larak ger\u00e7ekle\u015ftirilir. Bir bile\u015fen bir olay yay\u0131mlarken, bu olay global event bus taraf\u0131ndan t\u00fcm abone olan bile\u015fenlere iletilir. Bu sayede, bile\u015fenler aras\u0131nda veri al\u0131\u015fveri\u015fi ve etkile\u015fim sa\u011flan\u0131r. Bu yakla\u015f\u0131m, \u00f6zellikle uygulaman\u0131n farkl\u0131 k\u0131s\u0131mlar\u0131nda bulunan bile\u015fenler aras\u0131nda ileti\u015fimi basitle\u015ftirmek i\u00e7in idealdir. Ancak, \u00e7ok b\u00fcy\u00fck uygulamalar i\u00e7in a\u015f\u0131r\u0131 karma\u015f\u0131kl\u0131\u011fa yol a\u00e7abilece\u011finden, dikkatli kullan\u0131lmal\u0131d\u0131r. Daha b\u00fcy\u00fck uygulamalar i\u00e7in Vuex gibi state y\u00f6netim k\u00fct\u00fcphaneleri tercih edilebilir. Bu konu, makalede ilerleyen b\u00f6l\u00fcmlerde daha detayl\u0131 ele al\u0131nacakt\u0131r. Global Event Bus’\u0131n temel i\u015fleyi\u015fini anlamak, uygulamalar\u0131n\u0131zda nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 \u00f6\u011frenmek i\u00e7in \u00f6nemlidir.<\/p>\n

Global Event Bus Nas\u0131l Olu\u015fturulur ve Kullan\u0131l\u0131r?<\/h3>\n

Global event bus’\u0131 olu\u015fturmak i\u00e7in birka\u00e7 farkl\u0131 y\u00f6ntem vard\u0131r. En yayg\u0131n y\u00f6ntem, yeni bir Vue \u00f6rne\u011fi olu\u015fturmak ve bunu event bus olarak kullanmakt\u0131r. Bu, uygulaman\u0131z\u0131n \u00f6mr\u00fc boyunca var olan ve t\u00fcm bile\u015fenler taraf\u0131ndan eri\u015filebilen bir nesne sa\u011flar. A\u015fa\u011f\u0131da basit bir \u00f6rnek verilmi\u015ftir:<\/p>\n

const EventBus = new Vue();\n\n\/\/ Bile\u015fen 1: Olay yay\u0131mlama\nEventBus.$emit('my-event', 'Merhaba d\u00fcnya!');\n\n\/\/ Bile\u015fen 2: Olay dinleme\nEventBus.$on('my-event', (data) => {\n  console.log(data); \/\/ 'Merhaba d\u00fcnya!' yazd\u0131r\u0131r\n});<\/pre>\n
<\/code><\/p>\n
Bu kodda,  EventBus<\/code> ad\u0131nda bir Vue \u00f6rne\u011fi olu\u015fturuyoruz.  $emit<\/code> y\u00f6ntemi ile 'my-event' adl\u0131 bir olay yay\u0131ml\u0131yoruz ve 'Merhaba d\u00fcnya!' verisini iletiyoruz.  Di\u011fer bir bile\u015fen ise $on<\/code> y\u00f6ntemi ile bu olay\u0131 dinliyor ve gelen veriyi i\u015fliyor.  Bu,  bile\u015fenler aras\u0131nda veri al\u0131\u015fveri\u015finin ne kadar basit oldu\u011funu g\u00f6stermektedir.  B\u00fcy\u00fck uygulamalarda, daha karma\u015f\u0131k olay yap\u0131lar\u0131n\u0131 ve veri y\u00f6netimini ele almak i\u00e7in bu temel yap\u0131 \u00fczerine in\u015fa edilebilir.<\/p>\n
Vue.js Global Event Bus ile Uygulama \u00d6rnekleri<\/h2>\n
Global event bus'\u0131n kullan\u0131m alanlar\u0131 olduk\u00e7a geni\u015ftir.  Birka\u00e7 ger\u00e7ek d\u00fcnya senaryosuna bakal\u0131m:<\/p>\n
Senaryo 1: Kullan\u0131c\u0131 Oturum A\u00e7ma Durumunun Y\u00f6netimi<\/h3>\n
Bir uygulamada, kullan\u0131c\u0131n\u0131n oturum a\u00e7ma durumunu izlemek ve bu duruma ba\u011fl\u0131 olarak farkl\u0131 bile\u015fenleri g\u00fcncellemek gerekebilir.  \u00d6rne\u011fin, kullan\u0131c\u0131 oturum a\u00e7t\u0131\u011f\u0131nda, profil bilgilerini g\u00f6steren bir bile\u015fen g\u00fcncellenebilir.  Global event bus kullanarak, oturum a\u00e7ma bile\u015feni bir olay yay\u0131mlar ve di\u011fer bile\u015fenler bu olay\u0131 dinleyerek kendilerini g\u00fcncellerler.  Bu,  uygulaman\u0131n farkl\u0131 k\u0131s\u0131mlar\u0131nda oturum durumuna ba\u011fl\u0131 de\u011fi\u015fiklikleri y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\n
Senaryo 2:  Modallar\u0131n Kontrol\u00fc<\/h3>\n
Uygulamada \u00e7e\u015fitli modallar (\u00f6rne\u011fin, kay\u0131t formu, ileti\u015fim penceresi) kullan\u0131ld\u0131\u011f\u0131nda,  bu modallar\u0131n a\u00e7\u0131l\u0131p kapanmas\u0131n\u0131 y\u00f6netmek i\u00e7in global event bus kullan\u0131labilir.  Bir bile\u015fen modal\u0131 a\u00e7mak istedi\u011finde, ilgili bir olay yay\u0131mlar.  Modal bile\u015feni bu olay\u0131 dinler ve kendisini g\u00f6sterir.  Modal kapat\u0131ld\u0131\u011f\u0131nda da benzer \u015fekilde bir olay yay\u0131mlar ve di\u011fer bile\u015fenler kendilerini buna g\u00f6re g\u00fcnceller. Bu sayede modallar\u0131n y\u00f6netimi merkezi bir noktada toplanm\u0131\u015f olur ve kod okunabilirli\u011fi artar.<\/p>\n
\u0130leri D\u00fczey Global Event Bus Kullan\u0131m\u0131<\/h2>\n
Global event bus, basit uygulamalar i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. Ancak, daha karma\u015f\u0131k uygulamalar i\u00e7in baz\u0131 ek d\u00fczenlemeler ve optimizasyonlar gerekebilir.  Bu b\u00f6l\u00fcmde, deneyimli geli\u015ftiriciler i\u00e7in birka\u00e7 ipucu ve p\u00fcf noktas\u0131 ele alaca\u011f\u0131z.<\/p>\n
Olaylar\u0131n Y\u00f6netimi ve Temizleme<\/h3>\n
Bir\u00e7ok bile\u015fen ayn\u0131 olay\u0131 dinliyorsa, olaylar\u0131n y\u00f6netimi ve temizlenmesi \u00f6nemlidir.  Bir bile\u015fen kald\u0131r\u0131ld\u0131\u011f\u0131nda veya art\u0131k olaya ihtiya\u00e7 duymad\u0131\u011f\u0131nda,  $off<\/code> y\u00f6ntemi kullan\u0131larak ilgili olay dinleyicisi kald\u0131r\u0131lmal\u0131d\u0131r.  Bu, bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek ve uygulaman\u0131n performans\u0131n\u0131 korumak i\u00e7in \u00f6nemlidir.  Ayr\u0131ca, olay isimlerini anlaml\u0131 ve a\u00e7\u0131klay\u0131c\u0131 se\u00e7mek, kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.<\/p>\n
\/\/ Olay dinleyicisini kald\u0131rma\nEventBus.$off('my-event');<\/pre>\n
<\/code><\/p>\n
Alternatifler: Vuex ve \u00d6zel Olay Y\u00f6netim Sistemleri<\/h3>\n
Daha b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in, global event bus yerine Vuex gibi bir state y\u00f6netim k\u00fct\u00fcphanesi kullan\u0131lmas\u0131 \u00f6nerilir.  Vuex,  uygulaman\u0131zdaki t\u00fcm bile\u015fenlerin tek bir kaynaktan eri\u015febilece\u011fi merkezi bir veri deposu sa\u011flar.  Bu,  veri ak\u0131\u015f\u0131n\u0131 daha d\u00fczenli hale getirir ve uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131r.  Ayr\u0131ca,  uygulaman\u0131n \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re tasarlanm\u0131\u015f \u00f6zel olay y\u00f6netim sistemleri de geli\u015ftirilebilir.  Bu sistemler, global event bus'a g\u00f6re daha esnek ve \u00f6zelle\u015ftirilebilir olabilirler. Ancak, bu y\u00f6ntemler daha fazla geli\u015ftirme zaman\u0131 gerektirir.<\/p>\n
Performans Kar\u015f\u0131la\u015ft\u0131rmalar\u0131: Global Event Bus vs. Vuex<\/h2>\n
Global event bus, k\u00fc\u00e7\u00fck uygulamalar i\u00e7in h\u0131zl\u0131 ve basit bir \u00e7\u00f6z\u00fcm sunar. Ancak, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in performans sorunlar\u0131na yol a\u00e7abilir.  Vuex, merkezi bir veri deposu kullanarak daha iyi performans ve \u00f6l\u00e7eklenebilirlik sunar.  A\u015fa\u011f\u0131daki tabloda, her iki y\u00f6ntemin performans \u00f6zelliklerini kar\u015f\u0131la\u015ft\u0131raca\u011f\u0131z:<\/p>\n\n\n\n\n\n\n
\u00d6zellik<\/th>\nGlobal Event Bus<\/th>\nVuex<\/th>\n<\/tr>\n
Performans<\/td>\nK\u00fc\u00e7\u00fck uygulamalar i\u00e7in iyi, b\u00fcy\u00fck uygulamalar i\u00e7in yava\u015flayabilir<\/td>\nB\u00fcy\u00fck uygulamalar i\u00e7in daha iyi performans<\/td>\n<\/tr>\n
\u00d6l\u00e7eklenebilirlik<\/td>\nD\u00fc\u015f\u00fck<\/td>\nY\u00fcksek<\/td>\n<\/tr>\n
Karma\u015f\u0131kl\u0131k<\/td>\nD\u00fc\u015f\u00fck<\/td>\nOrta<\/td>\n<\/tr>\n
Bak\u0131m<\/td>\nZor olabilir<\/td>\nDaha kolay<\/td>\n<\/tr>\n<\/table>\n
Genel olarak, k\u00fc\u00e7\u00fck uygulamalar i\u00e7in global event bus tercih edilebilirken, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in Vuex kullan\u0131lmas\u0131 \u00f6nerilir.  Uygulaman\u0131z\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve karma\u015f\u0131kl\u0131\u011f\u0131nda dikkatlice de\u011ferlendirme yaparak en uygun y\u00f6ntemi se\u00e7meniz \u00f6nemlidir. Daha fazla bilgi i\u00e7in  (https:\/\/fatihsoysal.com) inceleyebilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Vue.js'de global event bus, bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek i\u00e7in basit ve etkili bir y\u00f6ntemdir.  Ancak, uygulaman\u0131z\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olarak,  performans ve \u00f6l\u00e7eklenebilirlik sorunlar\u0131 ya\u015fanabilir.  Bu nedenle,  uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131n\u0131 dikkatlice de\u011ferlendirmek ve global event bus'\u0131 do\u011fru \u015fekilde kullanmak \u00f6nemlidir.  Daha b\u00fcy\u00fck uygulamalar i\u00e7in Vuex gibi alternatif y\u00f6ntemleri tercih etmeyi d\u00fc\u015f\u00fcnmelisiniz.  Bu makalede ele al\u0131nan bilgiler, global event bus'\u0131n nas\u0131l kullan\u0131laca\u011f\u0131na dair kapsaml\u0131 bir anlay\u0131\u015f sunmay\u0131 hedeflemi\u015ftir.  Daha fazla geli\u015fmi\u015f teknik ve \u00f6rnekler i\u00e7in  (https:\/\/fatihsoysal.com) ziyaret edebilirsiniz.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
    \n
  • Global event bus'\u0131 ne zaman kullanmamal\u0131y\u0131m?<\/strong>  \u00c7ok b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in global event bus kullan\u0131m\u0131 karma\u015f\u0131kla\u015fabilir ve performans sorunlar\u0131na yol a\u00e7abilir. Bu durumlarda Vuex gibi bir state y\u00f6netim \u00e7\u00f6z\u00fcm\u00fc tercih edilmelidir.<\/li>\n
  • Global event bus kullan\u0131rken performans\u0131 nas\u0131l art\u0131rabilirim?<\/strong>  Olay dinleyicilerini temizlemek ($off<\/code>), anlaml\u0131 olay isimleri kullanmak ve gereksiz olay yay\u0131mlar\u0131n\u0131 \u00f6nlemek performans\u0131 art\u0131rmaya yard\u0131mc\u0131 olur.<\/li>\n
  • Global event bus g\u00fcvenlik a\u00e7\u0131s\u0131ndan riskli midir?<\/strong>  Global event bus'\u0131n yanl\u0131\u015f kullan\u0131m\u0131, beklenmedik davran\u0131\u015flara ve g\u00fcvenlik a\u00e7\u0131klar\u0131na neden olabilir.  Olay isimlerini dikkatlice se\u00e7mek ve olay dinleyicilerini do\u011fru bir \u015fekilde y\u00f6netmek \u00f6nemlidir.<\/li>\n
  • Vuex ile global event bus aras\u0131nda nas\u0131l bir se\u00e7im yapmal\u0131y\u0131m?<\/strong>  K\u00fc\u00e7\u00fck uygulamalar i\u00e7in global event bus yeterli olabilir, ancak b\u00fcy\u00fck uygulamalar ve karma\u015f\u0131k veri ak\u0131\u015f\u0131 i\u00e7in Vuex daha uygun bir se\u00e7enektir.<\/li>\n
  • Global event bus'\u0131 kullan\u0131rken hangi hatalarla kar\u015f\u0131la\u015fabilirim?<\/strong> Yayg\u0131n hatalar aras\u0131nda olay dinleyicilerinin temizlenmemesi, \u00e7ak\u0131\u015fan olay isimleri ve veri ak\u0131\u015f\u0131nda olu\u015fan karma\u015f\u0131kl\u0131k yer al\u0131r.<\/li>\n<\/ul>\n
    Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-29969","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nVue.js'de Global Event Bus: Kapsaml\u0131 Bir Rehber<\/title>\n<meta name=\"description\" content=\"Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js'de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js'de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js'de Global Event Bus: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js'de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js'de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-22T06:30:25+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-09-22T06:30:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\"},\"wordCount\":1630,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\",\"name\":\"Vue.js'de Global Event Bus: Kapsaml\u0131 Bir Rehber\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-22T06:30:25+00:00\",\"description\":\"Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js'de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js'de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue.js'de Global Event Bus: Kapsaml\u0131 Bir Rehber","description":"Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js'de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js'de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js'de Global Event Bus: Kapsaml\u0131 Bir Rehber","og_description":"Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js'de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js'de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-22T06:30:25+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber","datePublished":"2025-09-22T06:30:25+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/"},"wordCount":1630,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/","name":"Vue.js'de Global Event Bus: Kapsaml\u0131 Bir Rehber","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-22T06:30:25+00:00","description":"Karma\u015f\u0131k Vue.js uygulamalar\u0131nda bile\u015fenler aras\u0131 ileti\u015fimi y\u00f6netmek zorlu olabilir. Veri ak\u0131\u015f\u0131n\u0131 d\u00fczenlemek ve bile\u015fenler aras\u0131nda ba\u011flant\u0131y\u0131 sa\u011flamak i\u00e7in bir\u00e7ok y\u00f6ntem vard\u0131r. Bu rehberde, Vue.js'de global event bus (olay otob\u00fcs\u00fc) kullanman\u0131n g\u00fc\u00e7l\u00fc ve esnek bir \u00e7\u00f6z\u00fcm oldu\u011funu, nas\u0131l uygulanaca\u011f\u0131n\u0131 ve dikkat edilmesi gereken noktalar\u0131 ele alaca\u011f\u0131z. Global event bus, bile\u015fenleriniz aras\u0131ndaki ileti\u015fimi kolayla\u015ft\u0131r\u0131r ve kodunuzu daha d\u00fczenli hale getirir. Bu rehber, Vue.js'de global event bus kullan\u0131m\u0131na dair kapsaml\u0131 bir bilgi sunarak, hem yeni ba\u015flayanlara hem de deneyimli geli\u015ftiricilere yard\u0131mc\u0131 olmay\u0131 ama\u00e7lamaktad\u0131r.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-global-event-bus-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js’de Global Event Bus: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/29969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=29969"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/29969\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=29969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=29969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=29969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}