Introduction

You are using Vue.js from a while now. Have you ever wondered how you can communicate with your parent component? Let’s say you have a task scheduled from your child component, and you want to notify your parent one once the task is finished. How can you achieve that?
In Vue.js, we have custom events that help you to communicate with your parents enabling you to send data(messages) as well.

In this tutorial,we’ll see how this can be achieved 🙃 , but I want you to know that this is an advanced concept in Vue.js.

Demo

Here you have a simple demo of the final product 🙃

Prerequisites

In order to follow this tutorial, knowledge of JavaScript and Node.js is required. You should also have the following installed on your machine:

• Node.js (>=8.9.0)
• NPM(bundled with Node.js installer) or Yarn
• Vue-CLI

Create the project

We’ll use the new Vue CLI to scaffold our project, so ensure you have this tool installed on your machine as said in the prerequisites section. It is such a great tool that enhances the developer productivity. Head over to your terminal and type this command to create your project: vue create your-project-name . Feel free to name your project as you want 🙃 .
You will be prompted to pick a preset. You can either choose the default preset which comes with a basic Babel + ESLint setup, or select “Manually select features” to pick the features you need.
For the sake of the tutorial, we’ll choose the default preset as it best fits our needs.

Now you should have a pretty fresh generated project. In the next part we’ll get a deep insight of how we can send custom events.

Sending our custom event

Here we are intending to send a welcome message from our child component to the parent.
Amend your HelloWorld.vue like the following:

    //../src/components/HelloWorld.vue
    
    <template>
      <div class="hello">
        <h1 class="is-size-3">{{ msg }}</h1>
        <br>
         <div class="container" style="width: 35%;">
              <input class="input" type="text" v-model="welcomeMsg"> <br/><br/>
         <button class="button is-primary is-medium" @click="changeMsg">Click to change welcome message</button>
         </div>
      </div>
    </template>
    
    <script>
    /* eslint-disable */
    export default {
      name: "HelloWorld",
      data() {
        return {
        welcomeMsg: ""
        }
      },
      props: {
        msg: String
      },
      methods: {
        changeMsg() {
          this.$emit("changeMsg", this.welcomeMsg);
          console.log('message emit from child component')
        }
      }
    };
    </script>
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

In the template section of the code we an input to type our message and a button to submit the message to the parent component. We bind the welcomeMsg data to the input field using the v-model directive as you can see. The tricky part lies in how we send the message.
You may have noticed the changeMsg function which is called whenever the button is clicked. Yeah you guess it 😜 . This is where we emit our custom event. Inside its body, we emit our event changeMsg with our data as it happens the welcomeMsg.

This is what we’ve done in just one line: this.$emit("changeMsg", this.welcomeMsg);.
We also log some text to make sure the event has been sent.

Our HelloWorld.vue component has also a msg property for getting the message from the parent component and renders it in a <h1/> tag.

Listening to our custom event

In the previous section we sent our custom event from our child component. In this part, we’ll learn how to handle this event and to manipulate data it is carrying.

Copy and paste the following piece of code inside your App.vue component:

    //../src/components/HelloWorld.vue
    <template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <HelloWorld @changeMsg="setMessage" :msg="welcomeMsg"/>
      </div>
    </template>
    
    <script>
    /* eslint-disable */
    import HelloWorld from "./components/HelloWorld.vue";
    export default {
      name: "app",
      data() {
        return {
          welcomeMsg: "Hello World"
        };
      },
      methods: {
        setMessage(msg) {
          this.welcomeMsg = msg;
        }
      },
      components: {
        HelloWorld
      }
    };
    </script>
    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

We import our child component as it happens the HelloWorld.vue one, and we listen to our custom event changeMsg : <HelloWorld @changeMsg="setMessage" :msg="welcomeMsg"/>
The syntax @changeMsg is telling our app that a custom event named changeMsg is sent and defines what to do in order to react to it. We therefore define the setMessage function to handle our custom event. Inside its body, we assign the message sent to the welcomeMsg data; this data is also passed to our HelloWorld.vue component through the msg prop.

Run the app

Now, you can run your app with the following command:
yarn serve or npm run serve

Open your browser at the following location: localhost:8080 to get your full app working nicely.
Try to type a message like “Welcome to my app” and hit the button to emit the custom event to your parent, you should see your message rendered. Great right ?! 😎

Conclusion

Throughout this tutorial, we learnt how we can send custom events to communicate between child and parent components. I hope this tutorial has been useful to you and you will keep improving as you practice. This is the repo of the tutorial.