Provide / Inject in Vue.js

When you need to pass data from a top-level component down to a deeply nested child, passing it as a prop through every single component in the middle (prop drilling) becomes a maintenance nightmare.

provide and inject solve this. An ancestor component acts as a dependency provider for all its descendants. Any descendant component, regardless of how deep it is, can inject dependencies provided by ancestors up in its active instance tree.

When providing reactive state (like ref), it is highly recommended to keep any mutations to that state inside the *provider*. If the child needs to mutate it, the provider should provide a function (method) that mutates the state, and the child can inject and call that function.