Bab 4 dari 6 · 20 menit

Arsitektur Komponen

Aplikasi Vue dibangun dari rangkaian pohon hierarki komponen yang saling berinteraksi. Komunikasi antar komponen mengikuti aturan one-way data flow atau aliran data satu arah. Komponen induk mendistribusikan data ke bawah menuju komponen anak menggunakan antarmuka props. Sebaliknya, komponen anak berkomunikasi ke atas dengan memancarkan event kustom menggunakan mekanisme emits. Dengan prinsip ini, integritas status data tetap terjaga karena komponen anak dilarang keras mengubah nilai props secara langsung. Jika komponen anak membutuhkan manipulasi nilai tersebut, ia harus menduplikasi nilainya ke ref lokal atau memancarkan event agar komponen induk yang melakukan perubahan nilai data aslinya.

Dalam Composition API, deklarasi props dilakukan dengan makro defineProps(). Kamu dapat menambahkan aturan validasi tipe data, status keharusan pengisian nilai via required, hingga nilai bawaan default. Di sisi lain, makro defineEmits() digunakan untuk mendaftarkan event apa saja yang dapat dipancarkan oleh komponen anak. Ketika sebuah komponen anak ingin mendukung integrasi v-model kustom secara langsung, anak dapat memanfaatkan pola pasangan prop modelValue dan emit update:modelValue, atau menggunakan makro praktis defineModel() yang tersedia mulai versi Vue 3.4+.

Selain pertukaran data biasa, komponen sering kali membutuhkan fleksibilitas dalam menyusun struktur layout. Kebutuhan ini diakomodasi oleh fitur slots. Komponen anak dapat menyediakan wadah slot default berupa tag <slot></slot>, slot bernama menggunakan atribut name, serta scoped slots. Melalui scoped slots, komponen anak bahkan dapat mengekspor data lokal ke template luar yang dirancang oleh komponen induk sehingga komponen menjadi sangat fleksibel dan serbaguna.

<!-- Komponen ModalBox.vue -->
<template>
  <div class="modal">
    <header>
      <slot name="header">Judul Default</slot>
    </header>
    <main>
      <slot></slot>
    </main>
  </div>
</template>

// composables/useHitung.js
import { ref } from "vue";

export function useHitung(nilaiAwal = 0) {
  const angka = ref(nilaiAwal);
  const tambah = () => angka.value++;
  const reset = () => angka.value = nilaiAwal;
  return { angka, tambah, reset };
}

Ketika aplikasi tumbuh semakin dalam dan bercabang, meneruskan data dari satu komponen puncak ke komponen anak di lapisan terdalam melalui setiap tingkatan komponen perantara akan menimbulkan masalah prop drilling. Vue menyelesaikan masalah ini lewat fitur provide dan inject. Komponen induk menyediakan data menggunakan provide(), dan komponen keturunan di kedalaman berapa pun dapat langsung mengambilnya menggunakan inject(). Untuk menjaga keamanan data yang di-provide, bungkuslah dengan fungsi readonly(). Terakhir, untuk mengekstrak logika stateful yang berulang tanpa menduplikasi kode antarmuka, kamu dapat menulis composables. Composable adalah fungsi JavaScript biasa berbasis Composition API yang diawali dengan kata use, sangat mudah diuji secara terisolasi, dan dapat digunakan lintas komponen.

Cek pemahaman

1. Komponen anak diperbolehkan memodifikasi secara langsung isi variabel props yang diterimanya dari komponen induk.
2. Fitur manakah yang digunakan untuk membagikan data dari komponen leluhur ke komponen keturunan langsung tanpa melewati setiap tingkatan perantara?
3. Pada penggunaan komponen modal berikut, konten tombol Masuk akan ditempatkan pada slot bagian mana?
```
<ModalBox>
  <template #header>
    <h2>Konfirmasi Masuk</h2>
  </template>
  <button>Masuk</button>
</ModalBox>
```