[{"data":1,"prerenderedAt":415},["ShallowReactive",2],{"\u002Fblog\u002Fglobal-event-bus-vs-local-events-vue2":3},{"id":4,"title":5,"body":6,"date":401,"description":402,"extension":403,"image":404,"locale":405,"meta":406,"navigation":214,"path":407,"seo":408,"stem":409,"tags":410,"__hash__":414},"blog\u002Fblog\u002Fglobal-event-bus-vs-local-events-vue2.md","Technical Comparison: Global Event Bus vs. Local Component Events (Vue 2)",{"type":7,"value":8,"toc":388},"minimark",[9,13,18,147,150,154,166,171,174,184,188,264,266,274,285,288,291,297,300,315,352,354,358,384],[10,11,5],"h1",{"id":12},"technical-comparison-global-event-bus-vs-local-component-events-vue-2",[14,15,17],"h2",{"id":16},"_1-summary-comparison-table","1. Summary Comparison Table",[19,20,21,47],"table",{},[22,23,24],"thead",{},[25,26,27,32,40],"tr",{},[28,29,31],"th",{"align":30},"left","Kriteria",[28,33,34,35,39],{"align":30},"Global Event Bus (",[36,37,38],"code",{},"this.$root.$emit"," \u002F Custom Bus)",[28,41,42,43,46],{"align":30},"Local Component Event (",[36,44,45],{},"this.$emit",")",[48,49,50,71,103,125],"tbody",{},[25,51,52,59,65],{},[53,54,55],"td",{"align":30},[56,57,58],"strong",{},"Ruang Lingkup (Scope)",[53,60,61,64],{"align":30},[56,62,63],{},"Global \u002F Seluruh Aplikasi",". Komponen mana pun bisa mengirim dan mendengarkan event tanpa peduli hubungannya.",[53,66,67,70],{"align":30},[56,68,69],{},"Lokal (Parent-Child)",". Hanya berlaku dari komponen anak langsung ke komponen induknya.",[25,72,73,78,97],{},[53,74,75],{"align":30},[56,76,77],{},"Pembersihan Memori (GC)",[53,79,80,83,84,87,88,91,92,96],{"align":30},[56,81,82],{},"Manual",". Harus dilepas secara manual menggunakan ",[36,85,86],{},"$off"," di hook ",[36,89,90],{},"beforeDestroy()"," agar tidak bocor (",[93,94,95],"em",{},"memory leak",").",[53,98,99,102],{"align":30},[56,100,101],{},"Otomatis",". Vue secara otomatis menghapus dan membersihkan listener lokal ketika komponen dihancurkan.",[25,104,105,110,116],{},[53,106,107],{"align":30},[56,108,109],{},"Keterbacaan Kode",[53,111,112,115],{"align":30},[56,113,114],{},"Implisit \u002F Tersembunyi",". Hubungan pengirim dan penerima tidak terlihat di file template HTML.",[53,117,118,121,122,96],{"align":30},[56,119,120],{},"Eksplisit \u002F Terang",". Hubungan pengirim dan penerima terlihat jelas di tag template HTML (",[36,123,124],{},"@event-name=\"...\"",[25,126,127,132,141],{},[53,128,129],{"align":30},[56,130,131],{},"Risiko Konflik Nama",[53,133,134,137,138,96],{"align":30},[56,135,136],{},"Tinggi",". Risiko tabrakan nama event besar jika tidak diberi prefix unik (misal: tabrakan nama event ",[36,139,140],{},"'loading'",[53,142,143,146],{"align":30},[56,144,145],{},"Sangat Rendah",". Nama event terisolasi hanya pada hubungan komponen tersebut.",[148,149],"hr",{},[14,151,153],{"id":152},"_2-cara-kerja-global-event-bus","2. Cara Kerja Global Event Bus",[155,156,157,158,161,162,165],"p",{},"Global Event Bus menggunakan satu instance Vue terpusat (baik objek ",[36,159,160],{},"$root"," bawaan Vue atau berkas khusus ",[36,163,164],{},"event-bus.js",") untuk memancarkan event ke seluruh penjuru aplikasi.",[167,168,170],"h3",{"id":169},"hubungan-komponen","Hubungan Komponen:",[155,172,173],{},"Bisa digunakan untuk komunikasi antar komponen yang tidak berhubungan keluarga langsung (misal: Sibling, Grandchild ke Grandparent, atau Sidebar ke Toolbar).",[175,176,181],"pre",{"className":177,"code":179,"language":180},[178],"language-text","          [ Root App ]\n          \u002F          \\\n     [Sidebar]     [ChatArea]\n         |             |\n     [UserCard]    [InputBar]  \u003C-- Ingin kirim data dari UserCard ke InputBar\n","text",[36,182,179],{"__ignoreMap":183},"",[167,185,187],{"id":186},"implementasi","Implementasi:",[175,189,193],{"className":190,"code":191,"language":192,"meta":183,"style":183},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Di Komponen A (Pengirim)\nthis.$root.$emit('fitur-ai:draf-siap', data);\n\n\u002F\u002F Di Komponen B (Penerima)\ncreated() {\n  this.$root.$on('fitur-ai:draf-siap', this.handleEvent);\n},\nbeforeDestroy() {\n  \u002F\u002F WAJIB: Agar tidak terjadi memory leak (pemanggilan ganda di masa depan)\n  this.$root.$off('fitur-ai:draf-siap', this.handleEvent);\n}\n","javascript",[36,194,195,203,209,216,222,228,234,240,246,252,258],{"__ignoreMap":183},[196,197,200],"span",{"class":198,"line":199},"line",1,[196,201,202],{},"\u002F\u002F Di Komponen A (Pengirim)\n",[196,204,206],{"class":198,"line":205},2,[196,207,208],{},"this.$root.$emit('fitur-ai:draf-siap', data);\n",[196,210,212],{"class":198,"line":211},3,[196,213,215],{"emptyLinePlaceholder":214},true,"\n",[196,217,219],{"class":198,"line":218},4,[196,220,221],{},"\u002F\u002F Di Komponen B (Penerima)\n",[196,223,225],{"class":198,"line":224},5,[196,226,227],{},"created() {\n",[196,229,231],{"class":198,"line":230},6,[196,232,233],{},"  this.$root.$on('fitur-ai:draf-siap', this.handleEvent);\n",[196,235,237],{"class":198,"line":236},7,[196,238,239],{},"},\n",[196,241,243],{"class":198,"line":242},8,[196,244,245],{},"beforeDestroy() {\n",[196,247,249],{"class":198,"line":248},9,[196,250,251],{},"  \u002F\u002F WAJIB: Agar tidak terjadi memory leak (pemanggilan ganda di masa depan)\n",[196,253,255],{"class":198,"line":254},10,[196,256,257],{},"  this.$root.$off('fitur-ai:draf-siap', this.handleEvent);\n",[196,259,261],{"class":198,"line":260},11,[196,262,263],{},"}\n",[148,265],{},[14,267,269,270,273],{"id":268},"_3-cara-kerja-local-component-event-emit-bawaan","3. Cara Kerja Local Component Event (",[36,271,272],{},"$emit"," Bawaan)",[155,275,276,277,280,281,284],{},"Local Event adalah cara komunikasi bawaan Vue yang dikirimkan ke atas (",[93,278,279],{},"bubble up",") khusus untuk ",[56,282,283],{},"induk langsungnya (Direct Parent)",".",[167,286,170],{"id":287},"hubungan-komponen-1",[155,289,290],{},"Hanya berlaku dari Anak langsung ke Induknya.",[175,292,295],{"className":293,"code":294,"language":180},[178],"     [ChatArea] (Induk)\n         |\n     [AskAiShortcut] (Anak) \u003C-- Ingin mengirim data ke ChatArea\n",[36,296,294],{"__ignoreMap":183},[167,298,187],{"id":299},"implementasi-1",[175,301,303],{"className":190,"code":302,"language":192,"meta":183,"style":183},"\u002F\u002F Di Komponen Anak (Pengirim)\nthis.$emit('draft-ready', text);\n",[36,304,305,310],{"__ignoreMap":183},[196,306,307],{"class":198,"line":199},[196,308,309],{},"\u002F\u002F Di Komponen Anak (Pengirim)\n",[196,311,312],{"class":198,"line":205},[196,313,314],{},"this.$emit('draft-ready', text);\n",[175,316,320],{"className":317,"code":318,"language":319,"meta":183,"style":183},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Di Komponen Induk (Penerima - Terbaca Jelas di HTML) -->\n\u003CAskAiShortcut @draft-ready=\"handleDraftReady\" \u002F>\n","html",[36,321,322,328],{"__ignoreMap":183},[196,323,324],{"class":198,"line":199},[196,325,327],{"class":326},"sJ8bj","\u003C!-- Di Komponen Induk (Penerima - Terbaca Jelas di HTML) -->\n",[196,329,330,334,338,342,345,349],{"class":198,"line":205},[196,331,333],{"class":332},"sVt8B","\u003C",[196,335,337],{"class":336},"s7hpK","AskAiShortcut",[196,339,341],{"class":340},"sScJk"," @draft-ready",[196,343,344],{"class":332},"=",[196,346,348],{"class":347},"sZZnC","\"handleDraftReady\"",[196,350,351],{"class":332}," \u002F>\n",[148,353],{},[14,355,357],{"id":356},"_4-rekomendasi-penggunaan","4. Rekomendasi Penggunaan",[359,360,361,378],"ol",{},[362,363,364,370,371,373,374,377],"li",{},[56,365,366,367,369],{},"Gunakan Local Event (",[36,368,272],{}," lokal)"," jika Anda sedang berkomunikasi dari komponen anak langsung ke induknya (seperti tombol ",[36,372,337],{}," ke ",[36,375,376],{},"BchatArea","). Ini jauh lebih bersih, aman dari kebocoran memori, dan mudah dipahami jalurnya di file HTML.",[362,379,380,383],{},[56,381,382],{},"Gunakan Global Event Bus"," hanya jika Anda perlu mengirim data lintas komponen yang tidak memiliki hubungan keluarga dekat (misalnya: ketika sebuah event di sidebar profil pelanggan harus memicu sesuatu di dalam kotak input chat).",[385,386,387],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":183,"searchDepth":205,"depth":205,"links":389},[390,391,395,400],{"id":16,"depth":205,"text":17},{"id":152,"depth":205,"text":153,"children":392},[393,394],{"id":169,"depth":211,"text":170},{"id":186,"depth":211,"text":187},{"id":268,"depth":205,"text":396,"children":397},"3. Cara Kerja Local Component Event ($emit Bawaan)",[398,399],{"id":287,"depth":211,"text":170},{"id":299,"depth":211,"text":187},{"id":356,"depth":205,"text":357},"2026-06-26","Artikel tentang perbedaan Global Bus vs. Local Component Events (local bus) pada Vue 2.","md","https:\u002F\u002Fabcweb.id\u002Fcdn\u002Fplaceholder.svg","id",{},"\u002Fblog\u002Fglobal-event-bus-vs-local-events-vue2",{"title":5,"description":402},"blog\u002Fglobal-event-bus-vs-local-events-vue2",[411,412,413],"Update","Personal","Welcome","faNVVx5lqwjF-X3Ijv3cNY3HYfYmPIjChmDrd6bA_GU",1782440980199]