Belajar Vue 3 Dasar #13: Provide & Inject

• Apa Itu Provide & Inject?
• Provide di Parent
• Inject di Child
• Reactivity dengan Provide & Inject
• Provide Default Value
• Kapan Menggunakan Provide & Inject?
• Kesimpulan

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