props vs emit in vue.js

In my last article here , I tried to explain about data(), props, methods and components. Here I’m gonna explain about emit function of vue.js.

From the last article we understood the concept behind props and the usage of it. In short props helps to pass the information from parent to child but not vice versa, so what should do if we need to pass information back to parent(caller) from the child component. This is where emit function helps us.

$emit function emit or send custom events to it’s parent.

Lets see by an example, how we can do this. I’m considering a scenario here, where a child components will receive payload information from parent via props and child component will send modified value (payload) via an event back to the parent.

Creating child components names MyComponent.vue

<template>
  <div>
     <input type="text" v-model="firstName"/>
    <input type="text" v-model="lastName"/>
    <br/>
     <button @click='onButtonClick()'>
        Click Me
    </button>
  </div>
</template>
<script>
 export default {
   
  props: ['firstName', 'lastName'],
  
  emits: ['onClick'],
  
  methods :{
    onButtonClick($event){
      this.$emit("onClick", { fName: this.firstName, lName:this.lastName});
    }
  },
   
}
</script>

Here in the child component, we have two text box which binds the value firstName and lastName as received from parent. There is a button which calls the method ‘onButtonClick’ on click and emit an event for parent with payload information with updated firstName and lastName.

Now let’s create the main component, App.vue

<script>
  import MyComp from './MyComponent.vue' //import the component
export default {
  
  components: { 
       'my-comp' : MyCompl  //define the component
  }, 
   
 data() {
    return {
      firstName: 'Binod',
      lastName: 'Mahto',
      fullName:'',
    }
  },
  
 methods : {
    mtdCalculateFullName(payload) {
     this.$data.firstName = payload.fName;
     this.$data.lastName = payload.lName;
     this.$data.fullName =  this.$data.firstName +  ' ' + this.$data.lastName;
   }
  },  
}
</script>
<template>
 <div>
   <my-comp :first-Name='firstName' :last-Name='lastName' @on-Click='mtdCalculateFullName'></my-comp>
  </div>
  <div>
      <p>Full Name:</p><p>{{fullName}}</p>
  </div>
</template>

In above main component, I have give a name to my child component as ‘my-comp’ and in the template using the child component as <my-comp/>. This is optional and instead you can use <MyComp/> if you don’t want to give any name as I did in my last article example.
Main component (parent) here binding data() function members firstName and lastName against the props :first-Name=’firstName’ :last-Name=’lastName’ to pass the information to child, and it also binds the emitted event by child @on-click with a method available in parent @on-Click=’mtdCalculateFullName’.

In result, when you click on button rendered by child component, child component will emit a event name ‘on-click’ with updated firstName and lastName as event payload to the parent. if you run the example, your output would be as:

Conclusion:

props is a way to pass information from parent to child and emit function is a way to pass information back to parent from child.

That’s all. Hope you enjoyed the content, don’t forget to follow me for more like this and clap for it please. Happy programming.

Reference:
https://vuejs.org/guide/introduction.html

Reminder once again, you don’t need any tool or install anything to try above example instead you can do this via vue’s SFC playgorund: https://sfc.vuejs.org/