How to pass data from child to parent in vue js

In this article I will show you how to pass data from child to parent in vue.
We know that if we want to send data from parent to child we can use props but for the reverse case we have to use a different approach to achieve this.

App.vue

<template>

  <h1>{{ title }}</h1>

  <Child @changeTitle="ChangeT($event)" />

</template>
<script>
import Child from "./components/Child"
export default{
name:'App',
components: {
    Child,
},
data()
{
   return{
     title:'Rick Grimes'
         }
},
methods:{
    ChangeT(title)
    {
      this.title=title;
    },
}
</script>
<style></style>

Child.vue

<template lang="html">
  <button type="button" @click='passEvent'> Update me</button>
</template>

<script>
export default {
  name:'Child',
  methods:{
    passEvent()
    {
      this.$emit('changeTitle','Awesome ')
    }
  }
}
</script>

<style lang="css" scoped>
</style>

In child.vue we are using a method named $emit this method takes 2 arguments first the custom event and the second is the data we are passing

1. changeTitle is the custom event
2. 'Awesome' is the data we are passing to parent

in App.vue we are calling a method named 'ChangeT($event)' on the event 'changeTitle' (it is custom event you can name as your preferences)

when the ChangeT function called it takes the parameter which we are passing from child in this case $event='Awesome'

then we are simply changes the data value with this $event value

Now we have successfully passed data from child to parent in vue

Comments

[Khaled ben hassen]

Hi Sourav, nice article ! In my case I have a child component C1.vue that contrains a various list of methods and data inside and I want to send all of it to Dashboard.vue in order to display it . how can I emit them all at once ?

[Sourav das]

for a head start in js you can do the sololearn js course that is good free course,you will be very familiar with basic js and after that learn ajax,promises etc and make some little fun webapp with js.It doesn't have to be great app but make some you will learn more well by doing so :)