Mengirim Data dari Komponen Anak ke Induk di Vue 3

Di Vue 3, aliran data antar komponen adalah hal penting untuk membangun aplikasi yang dinamis dan responsif. Mengirim data dari induk ke anak mudah dilakukan dengan props, tetapi mengirim data dari anak ke induk membutuhkan pendekatan berbeda. Panduan ini akan menjelaskan metode utama untuk mengirim data dari komponen anak ke induk, sehingga aplikasi tetap efisien dan mudah dipelihara.

1. Mengapa Mengirim Data dari Anak ke Induk Penting

Pengiriman data dari anak ke induk krusial terutama dalam arsitektur berbasis komponen. Beberapa skenario umum termasuk:

• Penanganan input formulir: Anak mengelola input, induk memproses atau menyimpan data.
• Sinkronisasi status: Anak memperbarui status induk berdasarkan interaksi pengguna.
• Interaksi kompleks antar komponen: Misalnya memilih item dari daftar yang perlu diinformasikan ke induk.

Memahami aliran data ini membantu menjaga kode bersih dan logis.

2. Metode untuk Mengirim Data dari Anak ke Induk

a. Menggunakan Event Emit

Vue 3 menyediakan emit untuk mengirim event dari anak ke induk. Ini sederhana dan fleksibel.

Contoh Kode:

<!-- ChildComponent.vue -->
<template>
  <button @click="sendData">Send Data to Parent</button>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['update']);

function sendData() {
  emit('update', 'Data from child');
}
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @update="handleUpdate" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';

function handleUpdate(data) {
  console.log('Received from child:', data);
}
</script>

b. Menggunakan Nama Event Kustom

Anda dapat menggunakan nama event kustom untuk menjaga kode tetap jelas. Misalnya, @form-submitted atau @item-selected agar tujuan event lebih mudah dipahami.

c. Binding Dua Arah dengan v-model (Lanjutan)

v-model dapat digunakan untuk binding dua arah antara induk dan anak, berguna ketika data perlu disinkronkan secara otomatis.

Contoh:

<!-- ChildComponent.vue -->
<template>
  <input v-model="localValue" @input="updateValue" />
</template>

<script setup>
import { ref, defineEmits, defineProps, watch } from 'vue';

const props = defineProps({ modelValue: String });
const emit = defineEmits(['update:modelValue']);

const localValue = ref(props.modelValue);

watch(localValue, (val) => {
  emit('update:modelValue', val);
});

function updateValue() {
  // localValue otomatis tersinkronisasi
}
</script>

<!-- ParentComponent.vue -->
<template>
  <ChildComponent v-model="parentValue" />
</template>

<script setup>
import { ref } from 'vue';
const parentValue = ref('');
</script>

3. Contoh Praktis: Formulir dengan Komunikasi Anak ke Induk

Bayangkan Anda memiliki komponen input anak yang mengirimkan data ke induk ketika tombol “Submit” diklik. Induk kemudian memproses data atau mengirim ke API. Dengan emit atau v-model, komunikasi ini menjadi mudah dan terstruktur.

4. Praktik Terbaik

• Hindari komunikasi antar komponen yang terlalu dalam (deeply nested); gunakan props dan emit atau state management.
• Jaga komponen tetap terpisah (decoupled) untuk mempermudah pemeliharaan.
• Pertimbangkan library manajemen status seperti Vuex atau Pinia untuk aplikasi kompleks.
• Beri nama event yang jelas dan deskriptif agar mudah dipahami tim pengembang.

5. Kesimpulan

Mengirim data dari anak ke induk adalah konsep penting di Vue 3. Dengan emit, event kustom, atau v-model, Anda dapat mengatur aliran data dengan rapi dan terkontrol. Memahami teknik ini adalah langkah penting untuk menguasai Vue 3 dan membangun aplikasi berbasis komponen yang scalable dan mudah dipelihara.