Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Computed Properties & Watchers, bagaimana membuat nilai turunan serta memantau perubahan data.
Pada artikel kali ini, kita akan membahas tentang Provide & Inject, sebuah fitur di Vue yang memungkinkan kita berbagi data antar komponen tanpa harus meneruskan props satu per satu (props drilling).
Apa Itu Provide & Inject?
Biasanya, untuk mengirim data dari parent ke child kita menggunakan props. Namun, jika level komponennya banyak, props akan diteruskan berlapis-lapis.
Dengan provide & inject:
provide → digunakan oleh parent untuk menyediakan data.inject → digunakan oleh child untuk mengambil data tersebut.
Provide di Parent
<script setup>
import { ref, provide } from "vue"
import Child from "./Child.vue"
const user = ref("Budi")
// Parent menyediakan data
provide("username", user)
</script>
<template>
<div>
<h2>Ini Parent Component</h2>
<Child />
</div>
</template>
username disediakan oleh parent, dan bisa diakses oleh komponen anak di level mana pun.
Inject di Child
Child.vue
<script setup>
import { inject } from "vue"
const username = inject("username")
</script>
<template>
<p>Halo, {{ username }}</p>
</template>
username langsung diakses tanpa perlu props.
Reactivity dengan Provide & Inject
Jika kita menggunakan ref atau reactive, data akan tetap reaktif walaupun di-inject.
-
Parent.vue
<script setup>
import { ref, provide } from "vue"
import Child from "./Child.vue"
const count = ref(0)
provide("count", count)
</script>
<template>
<div>
<h2>Parent Count: {{ count }}</h2>
<button @click="count++">Tambah</button>
<Child />
</div>
</template>
-
Child.vue
<script setup>
import { inject } from "vue"
const count = inject("count")
</script>
<template>
<p>Count dari Parent: {{ count }}</p>
</template>
Jika kita klik tombol di parent, nilai count di child ikut berubah.
Provide Default Value
Jika inject tidak menemukan data, kita bisa memberi default value.
<script setup>
import { inject } from "vue"
const theme = inject("theme", "light") // default "light"
</script>
<template>
<p>Tema: {{ theme }}</p>
</template>
Kapan Menggunakan Provide & Inject?
Gunakan provide & inject jika:
- Data harus diakses banyak komponen di berbagai level.
- Tidak ingin props drilling (meneruskan props berlapis-lapis).
- Cocok untuk global data seperti theme, auth user, atau config.
Namun, jangan berlebihan memakainya. Jika data digunakan di seluruh aplikasi, lebih baik gunakan state management seperti Pinia.
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Provide & Inject di Vue:
provide → menyediakan data dari parent.inject → mengambil data di child.- Data tetap reaktif jika menggunakan
ref atau reactive.
Di artikel berikutnya, kita akan membahas tentang Custom Composable, yaitu cara membuat reusable logic di Vue (mirip dengan custom hooks di React).
Terima kasih