Component Event di Vue

Kali ini kita akan belajar cara menggunakan component event di vue. Pada tulisan sebelumnya aku sudah menunjukkan cara menggunakan component properties. Nah, selain menambahkan component properties kita juga bisa menambahkan component event. Dengan menambahkan event pada component, kita bisa menambahkan directive v-on pada component yang kita buat.

Cara Pemakaian

Cara menambahkan component event ini sangat mudah ya, kita tinggal menggunakan fungsi defineEmits di script, membuat fungsi yang terkait dengan emit dan terakhir kita buat element yang memanggil fungsi tersebut. Oke, untuk lebih jelasnya, mari kita perhatikan contoh berikut ini.

<script setup lang="ts">
  const props = defineProps({
    name: String,
    age: Number
  });

  const emits = defineEmits(["click"]);

  function increaseAge() {
    emits("click");
  }

</script>

<template>
  Your name is {{props.name}}, and your age is {{props.age}}
  <button @click="increaseAge">Increase your age</button>
</template>

<style scoped>

</style>

Perhatikan source code pada bagian script di atas. Di sana terdapat const emits dan juga function increaseAge. Function increaseAge dipanggil pada event @click pada template dan function tersebut hanya berisi emits(‘click’). Artinya emits ini hanya mengaitkan event dengan element yang akan menggunakan event tersebut. Untuk fungsi yang ada pada event akan dibuat oleh main component. Sekarang mari kita lihat script pada bagian main component.

<script setup lang="ts">

import Emit from "./Emit.vue";
import {ref} from "vue";

const age = ref(20);
</script>

<template>
  <Emit name="Ardhan" :age="age" @click="age++"/>
</template>

<style scoped></style>

Nah, perhatikan pada main component di atas, kita bisa menggunakan @click yang menjalankan fungsi untuk menambah age.

Nah, nama emits click itu tidak harus sama dengan event yang biasa kita gunakan ya. Kita tidak harus menambahinya click, change, yang sama persis dengan nama event bawaan. Kita boleh saja menamai emit dengan nama “pencet”, tapi kita juga harus mengubah fungsi yang memanggil emit menjadi “pencet”, contohnya seperti ini:

const emits = defineEmits(["pencet"]);

function increaseAge() {
  emits("pencet");
}

Multiple Component Event di Vue

Karena defineEmits ini parameternya adalah array, kita juga bisa menambahkan event yang lain. Di contoh sebelumnya age akan bertambah saat kita klik Increase Age. Nah, kita akan menambah component tersebut dengan menambahkan Decrease Age yang akan mengurangi age ketika tombol tersebut diklik.

<script setup lang="ts">
  const props = defineProps({
    name: String,
    age: Number
  });

  const emits = defineEmits(["firstClick", "secondClick"]);

  function increaseAge() {
    emits("firstClick");
  }

  function decreaseAge() {
    emits("secondClick");
  }

</script>

<template>
  Your name is {{props.name}}, and your age is {{props.age}}
  <button @click="increaseAge">Increase your age</button>
  <button @click="decreaseAge">Decrease your age</button>
</template>

<style scoped></style>

Pada contoh di atas kita membuat emits dengan nama firstClick dan secondClick. Nah, berikut ini adalah cara kita memanggil component yang menggunakan 2 event.

<script setup lang="ts">

import Emit from "./Emit.vue";
import {ref} from "vue";

const age = ref(20);
</script>

<template>
  <Emit name="Ardhan" :age="age" @first-click="age++" @second-click="age--"/>
</template>

<style scoped></style>

Hasil dari main component di atas adalah sebagai berikut:

Penutup

Nah, demikianlah cara membuat component event di Vue JS. Caranya mudah bukan? Jika penjelasan di atas kurang lengkap, teman-teman bisa melihat dokumentasi Vue ya.Selamat mencoba dan selamat belajar ya. Semoga tulisan ini bermanfaat untuk kita semua.