{"id":10532,"date":"2024-06-07T06:27:25","date_gmt":"2024-06-07T06:27:25","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=10532"},"modified":"2024-06-07T12:06:29","modified_gmt":"2024-06-07T12:06:29","slug":"vue-js-3-event-bus","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/vue-js-3-event-bus","title":{"rendered":"Vue.js 3 Event Bus"},"content":{"rendered":"<p>In Vue.js 3, the concept of an event bus, which was commonly used in Vue 2, can be implemented using a more modern and recommended approach involving the mitt library or the Vue 3 provide and inject features. The event bus is used to facilitate communication between components that do not have a direct parent-child relationship.<\/p>\n<h3>Using mitt Library for Event Bus in Vue 3<\/h3>\n<p>mitt is a tiny (~200 bytes) event emitter library that can be used to create an event bus in Vue 3. Here&#8217;s how you can set it up:<\/p>\n<p>Install mitt:<br \/>\nFirst, install the mitt library using npm or yarn.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">npm install mitt\r\n# or\r\nyarn add mitt<\/pre>\n<p>Create the Event Bus:<br \/>\nCreate a separate file (e.g., eventBus.js) to initialize and export the event bus.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\/\/ eventBus.js\r\nimport mitt from 'mitt';\r\nconst emitter = mitt();\r\nexport default emitter;\r\n<\/pre>\n<p>Use the Event Bus in Components:<br \/>\nParent Component: Where the event bus will be injected and provided to its children.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\"><script>\r\nimport eventBus from '.\/eventBus';\r\nimport ChildComponent from '.\/ChildComponent.vue';\r\nimport SiblingComponent from '.\/SiblingComponent.vue';\r\n\r\nexport default {\r\n components: {\r\n   ChildComponent,\r\n   SiblingComponent\r\n },\r\n provide() {\r\n   return {\r\n     eventBus\r\n   };\r\n }\r\n};\r\n<\/script>\r\n<\/pre>\n<p>Child Component: Emit an event.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">\r\n<!-- ChildComponent.vue -->\r\n <button>Send Message<\/button>\r\n<script>\r\nexport default {\r\n inject: ['eventBus'],\r\n methods: {\r\n   sendMessage() {\r\n     this.eventBus.emit('message', 'Hello from ChildComponent!');\r\n   }\r\n }\r\n};\r\n<\/script>\r\n<\/pre>\n<p>Sibling Component: Listen for the event.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\n<!-- SiblingComponent.vue -->\r\n<template>\r\n <div>\r\n   <p>{{ message }}<\/p>\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n inject: ['eventBus'],\r\n data() {\r\n   return {\r\n     message: ''\r\n   };\r\n },\r\n mounted() {\r\n   this.eventBus.on('message', (msg) => {\r\n     this.message = msg;\r\n   });\r\n },\r\n beforeUnmount() {\r\n   this.eventBus.off('message');\r\n }\r\n};\r\n<\/script>\r\n\r\n<\/pre>\n<h2>Explanation<\/h2>\n<p>Installing mitt:<\/p>\n<ol>\n<li>You install the mitt library, which is a lightweight event emitter library suitable for creating an event bus in Vue 3.<br \/>\nCreating the Event Bus:<\/li>\n<li>You create an eventBus.js file where you initialize the mitt instance and export it for use in other components.<\/li>\n<li>Parent Component:\n<ul>\n<li>The parent component imports the event bus and provides it to its child components using the provide function.<\/li>\n<li>Child components can then use the inject function to access the event bus.<\/li>\n<\/ul>\n<\/li>\n<li>Child Component:<br \/>\n&#8211; The child component injects the event bus and uses the emit method to send an event named message with a payload.<br \/>\n&#8211; When the button is clicked, the sendMessage method emits a message event with a string payload.<\/li>\n<li>Sibling Component:<br \/>\n&#8211; The sibling component injects the event bus and sets up an event listener in the mounted lifecycle hook.<br \/>\n&#8211; The on method is used to listen for the message event. When the event is received, the message is stored in the message data property.<br \/>\n&#8211; The beforeUnmount lifecycle hook removes the event listener to prevent memory leaks.<\/li>\n<\/ol>\n<p>This way, you can facilitate communication between sibling components using an event bus in Vue.js 3 with the help of the mitt library.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In Vue.js 3, the concept of an event bus, which was commonly used in Vue 2, can be implemented using a more modern and recommended approach involving the mitt library or the Vue 3 provide and inject features. The event bus is used to facilitate communication between components that do not have a direct parent-child [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":10533,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-10532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10532"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=10532"}],"version-history":[{"count":6,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10532\/revisions"}],"predecessor-version":[{"id":10555,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/10532\/revisions\/10555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/10533"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=10532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=10532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=10532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}