Apa fungsi $emit di Vue.js?

Singkatnya, fungsi $emit di vue adalah cara bagaimana kita mengirim event atau kejadian di komponen anak(child) ke komponen induk(parent).

Misalnya di komponen anak, kita memiliki data dan kita akan kirim ke komponen orang tua. Disini kita bisa gunakan $emit atau custom event untuk di tampilkan di komponen induk, dan kita bisa ubah atau menambahkan event dari komponen induk untuk render ke DOM.

Contohnya seperti dibawah ini.

Misalnya saya membuat komponen anak dengan nama UserForm.vue dan membuat button dengan event click dan custom event, seperti dibawah ini.

//UserForm.vue
<template>
  <div class="user-form"> 
    <button v-on:click="$emit('add-user')">
        Submit
      </button>
  </div>
</template>

Pada v-on directive diatas kita tambahkan custom event dengan nama event nya yaitu "add-user". Ketika button di klik, maka event akan di siarkan, dan parent akan mendengarkan.

Agar parent dapat mendengarkan / menerima event, kita perlu memanggilnya pada komponen yang didefinisikan; seperti di bawah ini.

Pastikan nama event sama.

//App.vue
<template>
  <div>
    <user-form @add-user="addUser"></user-form>
  </div>
</template>

<script> 
  import UserForm from './UserForm.vue'
  
  export default {
    components: { 
      UserForm
    },
    data(){
      return { 
        //
      } 
    },
     methods: { 
      addUser(){
        alert('ok!');
      }
     }
    }
</script>

Pada komponen orang tua diatas (App.vue) kita import komponen anak dan memanggil event yang diberikan dengan method baru untuk kita buat tindakan yang ingin kita buat, seperti memunculkan alert diatas.

Contoh lainnya kita juga bisa membuat custom event atau menggunakan $emit, membuat event untuk membuat data menyimpannya pada database.

Kita buat event dengan menambahkan data atau value, mengirimnya ke komponen parent dengan cara seperti dibawah ini.

this.$emit('nama-event', value)

Sekarang pada komponen UserForm.vue kita buat form input dan data properti seperti di bawah ini.

<template>
  <div class="user-form"> 
    <form @submit.prevent="submit">
      <div class="form-group">
        <label for="name">Title</label>
        <input type="text" class="form-control" v-model="user.name">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" v-model="user.email">
      </div> 
        <div class="form-group">
        <label for="password">Password</label>
        <input type="password" class="form-control" v-model="user.password">
      </div> 
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>
</template>
 
<script>   
export default { 
  name: 'user-form',
  data(){
    return { 
      user: {
        name: '',
        email: '', 
        password: ''
      }
    } 
  },
   methods: { 
    submit(){
      this.$emit('add-user', this.user)
    }
   }
  }
</script>

Lalu di komponen App.vue pada method addUser() kita tambahkan parameter yang berisi data atau value inputan.

addUser(user){
  console.log(user);
}

Ketika submit kita bisa lihat data inputan pada console log browser.

Atau kita juga bisa mengirim formulir menggunakan axios seperti dibawah ini.

addUser(user){
 axios.post('api/user/register', user)
  .then(response => { 
    console.log(response.data)
  })
  .catch(error => {
    console.error(error);
  });
},

Demikian penjelasan singkat tentang apa fungsi $emit dan contoh sederhana penggunaan $emit atau custom event di vue.js, semoga bermanfaat.