Tutorial Nuxt Emit| Menggunakan Emit Komunikasi Child Component ke Parent

Dipostingan sebelumnya dengan judul "Tutorial Nuxt Props| Menggunakan Props Komunikasi Parent ke Child Component" belajar menggunakan Props di nuxt.js postingan kali ini belajar menggunakan emit. Secara singkat fungsi $emit di ekosistem vue di gunakan untuk mengirim event yang ada di komponen anak(child) ke komponen induk(parent).

Contohnya di komponen anak, memiliki data dan akan berkomunikasi/kirim ke komponen orang tua. Untuk dapat melakukan hal itu kita menggunakan $emit atau custom event untuk di tampilkan di komponen induk, dan kita bisa ubah atau menambahkan event dari komponen induk untuk render ke DOM.

Mari kita coba menggunakannya langsung di koding.

Koding Komponen Parent(Induk)

Misalnya kita membuat komponen induk dengan nama idwo.vue seperti coding di bawah ini.

<template>
  <div class="w-full h-full flex flex-col space-x-4 px-4">
    <div class="flex flex-col w-full py-4 px-4">
      <p class="text-hijau-1 font-semibold text-4xl">Cek Harga</p>
    </div>
    <div class="w-full h-full grid grid-cols-2 py-4 px-4 space-x-4 items-start justify-start">
      <detailbid
        v-for="(vendor, i ) in dataVendor"
        :key="i"
        :idRAB="idRAB" //props
        @reloadback="onReloadback" //$emit
        />
    </div>
  </div>
</template>
<script>
export default{
  methods: {
    onReloadback(val){
      console.log(val) // console nilai val dari data yang di kirim di component child
    },
  }
}
</script>

Sekilas tentang vue.js

Koding Komponen Child(Anak)

kita buat semua child komponen dengan nama detailbid.vue

<template>
<div class="w-full">
  <div class="w-full mx-auto mt-8 pb-20">
    <div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded ">
      <button @click="reloadback()" class="bg-blue-500 px-4 py-1">Test Emit</button>
    </div>
  </div>
<div>
</template>
<script>
export default {
  name : 'detailbid',
  props: {
    idRAB: {
      type: String,
    },
  },
  methods: {
    reloadback(){
      let val = 'ini value'
      this.$emit('reloadback',val) //penulisan fungsi emit di child
    },
  },

}
</script>

semoga tulisan ini membantu.