Provide/Inject — Vue

provide dan inject memungkinkan data dilewatkan ke komponen keturunan tanpa prop drilling. // Di parent provide("theme", ref("dark")) provide("appName"…

provide dan inject memungkinkan data dilewatkan ke komponen keturunan tanpa prop drilling.

// Di parent
provide("theme", ref("dark"))
provide("appName", "Hyper Sheets")

---template---
<div>
  <h1>App</h1>
  <p>Lihat child component</p>
</div>
// Di child/grandchild
const theme = inject("theme")
const appName = inject("appName", "Default App")

---template---
<p>Theme: {{ theme }}</p>
<p>App: {{ appName }}</p>

Mirip Context API di React, tapi lebih sederhana.

Yang akan kamu pelajari