Cara Memanggil Fungsi Antar Component di Vue 3 dengan Mitt

Vue.js adalah kerangka kerja JavaScript yang kuat yang sangat populer untuk membangun antarmuka pengguna interaktif. Dengan Vue 3, pengembangan aplikasi web semakin mudah dan kuat. Dalam pengembangan aplikasi Vue, ada saatnya ketika Anda perlu berkomunikasi antara komponen-komponen yang berbeda. Salah satu cara yang efektif untuk melakukan ini adalah dengan menggunakan “Mitt.”

Mitt adalah pustaka kecil yang memungkinkan Anda mengatur dan mengelola peristiwa khusus (events) untuk berkomunikasi antara komponen di aplikasi Vue Anda. Dalam artikel ini, kita akan menjelaskan langkah-langkah bagaimana Anda dapat menggunakannya untuk memanggil fungsi antar komponen di Vue 3.

Persiapan

Sebelum mengintegrasikan Vue 3 ke dalam proyek Laravel, anda harus sudah melakukan konfigurasi dan instalasi Laravel. Klik link berikut untuk install laravel Cara Install Laravel 10 dan Vue 3.

Langkah 1: Instalasi Mitt

Langkah pertama adalah memasang pustaka Mitt dalam proyek Vue Anda. Anda dapat melakukannya dengan menggunakan npm atau yarn. Buka terminal Anda dan jalankan perintah berikut:

npm install mitt

Langkah 2: Impor dan Inisialisasi

Selanjutnya adalah mengimpor dan menginisialisasi dalam proyek Vue Anda. Anda biasanya melakukannya di tingkat akar aplikasi (biasanya file main.js). Berikut contoh cara melakukannya:

import { createApp } from 'vue';
import mitt from 'mitt';
import App from './App.vue';

const emitter = mitt();

const app = createApp(App);

app.config.globalProperties.$emitter = emitter;

app.mount('#app');

Kode di atas menginisialisasinya sebagai emitter. Kami juga menghubungkannya ke aplikasi Vue dengan menggunakan app.config.globalProperties.$emitter. Ini akan membuat emitter tersedia di semua komponen dalam aplikasi.

Langkah 3: Membuat Komponen dan Menggunakan Mitt

Selanjutnya, mari buat dua komponen yang akan berkomunikasi. Misalnya, kita memiliki komponen “KomponenA” dan “KomponenB.” KomponenA akan mengirim peristiwa dan KomponenB akan mendengarkan peristiwa tersebut.

KomponenA.vue

<template>
  <button @click="sendMessage">Kirim Pesan ke Komponen B</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emitter.emit('pesan-ke-B', 'Halo dari Komponen A');
    },
  },
};
</script>

KomponenB.vue

<template>
  <div>
    <p>{{ pesan }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pesan: '',
    };
  },
  created() {
    this.$emitter.on('pesan-ke-B', (message) => {
      this.pesan = message;
    });
  },
};
</script>

KomponenA memiliki tombol yang, saat diklik, akan mengirimkan pesan ke KomponenB melalui Mitt. KomponenB mendengarkan peristiwa ‘pesan-ke-B’ dan menampilkan pesan yang diterima.

Kesimpulan

Menggunakan Mitt adalah cara yang sederhana dan efektif untuk mengatur komunikasi antar komponen di Vue 3. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah memanggil fungsi antar komponen dan mengirim data di seluruh aplikasi Anda. Baca document resminya di sini.