provide() in Parent Components
Providing primitive values, reactive refs, and objects — maintaining reactivity through provide.
The provide Function
Vue provide lets a component offer data to all of its descendants. Call it in <script setup> with a key and a value.
import { provide } from "vue";
provide("message", "Hello from ancestor");Any Descendant Can Inject
Once provided, any component anywhere below in the tree can inject the same key - no matter how many layers deep - without intermediate components doing anything.
App (provides "message")
-> ... -> DeepChild (injects "message")All lessons in this course
- The Prop Drilling Problem
- provide() in Parent Components
- inject() in Child Components
- Provide/Inject for App-Level State