Provide/Inject
Penjelasan
provide()/inject() mengatasi masalah "prop drilling", setara Context API di React. Komponen leluhur menyediakan data lewat provide('kunci', nilai), lalu komponen keturunan mana pun di bawahnya (tidak peduli berapa level) bisa mengaksesnya langsung lewat inject('kunci') TANPA passing props manual di tiap level perantara.
Contoh Konsep
<!-- App.vue (leluhur) -->
<script setup>
import { ref, provide } from 'vue';
const tema = ref('terang');
provide('tema', tema);
</script>
<template>
<Halaman /> <!-- tidak perlu passing props tema -->
</template>
<!-- TombolTema.vue (keturunan, level berapa pun) -->
<script setup>
import { inject } from 'vue';
const tema = inject('tema'); // langsung akses
</script>
<template>
<button @click="tema = tema === 'terang' ? 'gelap' : 'terang'">Tema: {{ tema }}</button>
</template>Praktikum
Di App.vue, buat ref() user (objek {nama: 'Budi'}) dan provide() dengan kunci 'user'. Buat komponen ProfilUser.vue yang mengakses lewat inject('user') dan menampilkan namanya, dipanggil dari dalam komponen perantara tanpa passing props manual.
Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.
Tips
Sama seperti Context di React, provide/inject BUKAN pengganti universal untuk semua state management — paling berguna untuk data yang benar-benar "lintas banyak level", bukan sekadar berbagi data antar dua komponen bertetangga (untuk itu, props/emit biasa tetap lebih sederhana).