In this blog we will learn how to emit events from child components, emit from nested child components etc. Emit is defined generally as the process of sending out a beam. noise, smell, gas etc. In programming we use the term emit to define the process of sending a signal. The prerequisites for this are Node.js versions greater than 8.9.0, NPM and Vue-CLI. Let’s begin by creating the project. Use the new Vue CLI to scaffold our project since this Vue CLI tool will increase productivity. To create a project type the following command in your terminal.

vue create your-project-name

Choose the default preset or select ‘manually select features’. For this example we will choose default. Now we are sending a welcome message from our child component to the parent. HellowWorld.vue file is shown below.

//../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 our template we have an input to type our message and a button to submit the message to our parent component. We bind welcomeMsg data to the input field using the v-model directive. There's a changeMsg function which is called every time the button is clicked, this is where we emit our event. 

 Now we will see how to send our custom event from our child component and how to manipulate the data the event is carrying. In the app.vue component paste the below given code.

//../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>

Import our child component as it takes place in the HelloWorld.vue one. Then listen to our event changeMsg:<HelloWorld @changeMsg="setMessage" :msg="welcomeMsg"/>. The syntax @changeMsg tells our app that a custom event named changeMsg is sent and defines what to do to respond to it. setMessage function is defined to handle our custom event. Now we run the npm run serve command to run the application.