{"id":12814,"date":"2025-07-15T10:15:15","date_gmt":"2025-07-15T10:15:15","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12814"},"modified":"2025-07-15T10:15:15","modified_gmt":"2025-07-15T10:15:15","slug":"send-events-from-child-component-to-parent-in-vue-2","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/vue\/send-events-from-child-component-to-parent-in-vue-2","title":{"rendered":"Vue.js 2: Send Event From Component to Parent"},"content":{"rendered":"<p>In Vue.js 2, you can use custom events to send messages from a child component to a parent component. Here&#8217;s how you can do it:<\/p>\n<h2>1. Parent Component:<\/h2>\n<p>The parent component will listen for events emitted by the child component. You can define the custom event handler on the parent and bind it to the child component.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;child-component @custom-event=\"handleCustomEvent\"&gt;&lt;\/child-component&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/template&gt;\r\n\r\n&lt;script&gt;\r\nimport ChildComponent from '.\/ChildComponent.vue';\r\n\r\nexport default {\r\n  components: {\r\n    ChildComponent\r\n  },\r\n  methods: {\r\n    handleCustomEvent(message) {\r\n      console.log('Received message from child:', message);\r\n    }\r\n  }\r\n};\r\n&lt;\/script&gt;\r\n<\/pre>\n<ul>\n<li>@custom-event is the shorthand for v-on:custom-event, which listens for the custom-event from the child component.<\/li>\n<li>When the child component emits the custom-event, the handleCustomEvent method in the parent will be triggered, and the data passed from the child will be received.<\/li>\n<\/ul>\n<h2>2. Child Component:<\/h2>\n<p>In the child component, you use $emit to send an event to the parent. The custom-event is emitted, and you can send additional data along with it.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\n<template>\r\n  <button @click=\"sendEventToParent\">Click Me<\/button>\r\n<\/template>\r\n<script>\r\nexport default {\r\n  methods: {\r\n    sendEventToParent() {\r\n      this.$emit('custom-event', 'Hello Parent!');\r\n    }\r\n  }\r\n};\r\n<\/script>\r\n<\/pre>\n<ul>\n<li>When the button in the child is clicked, the sendEventToParent method is called, and it uses this.$emit() to emit an event named custom-event.<\/li>\n<li>The second argument (&#8216;Hello Parent!&#8217;) is the data that is passed to the parent component. In this case, it\u2019s a simple string.<\/li>\n<\/ul>\n<h2>3. Communication Flow:<\/h2>\n<ul>\n<li>The child component emits an event (custom-event).<\/li>\n<li>The parent component listens for that event using @custom-event=&#8221;handleCustomEvent&#8221;.<\/li>\n<li>When the event is received, the parent runs the handleCustomEvent method with the data passed from the child.<\/li>\n<\/ul>\n<h2>Full Example:<\/h2>\n<h3>Parent Component:<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\n<template>\r\n  <div>\r\n    <child-component @custom-event=\"handleCustomEvent\"><\/child-component>\r\n  <\/div>\r\n<\/template>\r\n<script>\r\nimport ChildComponent from '.\/ChildComponent.vue';\r\nexport default {\r\n  components: {\r\n    ChildComponent\r\n  },\r\n  methods: {\r\n    handleCustomEvent(message) {\r\n      console.log('Received from child:', message);\r\n    }\r\n  }\r\n};\r\n<\/script>\r\n<\/pre>\n<h3>Child Component:<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"typescript\">\r\n<template>\r\n  <button @click=\"sendEventToParent\">Click Me<\/button>\r\n<\/template>\r\n\r\n<script>\r\nexport default {\r\n  methods: {\r\n    sendEventToParent() {\r\n      this.$emit('custom-event', 'Hello Parent!');\r\n    }\r\n  }\r\n};\r\n<\/script>\r\n<\/pre>\n<h2>Conclusion:<\/h2>\n<p>This is a simple and effective way to pass data from a child component to a parent component in Vue 2. You can emit custom events from the child and handle them in the parent using @event-name syntax in the parent template.<\/p>\n<div class=\"qanda-read-box\"><div class=\"bg-light read-more-icon\"><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/04\/24061434\/read-txt.png\" alt=\"Also Read\"><p><\/p><h3>Also Read:<\/h3><a href=\"https:\/\/www.bacancytechnology.com\/blog\/vuejs-app-performance-optimization\" target=\"_blank\">Vuejs App Performance Optimization<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In Vue.js 2, you can use custom events to send messages from a child component to a parent component. Here&#8217;s how you can do it: 1. Parent Component: The parent component will listen for events emitted by the child component. You can define the custom event handler on the parent and bind it to the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12815,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-12814","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\/12814"}],"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=12814"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12814\/revisions"}],"predecessor-version":[{"id":12816,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12814\/revisions\/12816"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12815"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}