javascript / beginner
Snippet
Deep Dependency Injection with Provide/Inject
Provide and Inject allow an ancestor component to serve as a dependency provider for all its descendants, regardless of how deep the component hierarchy is, avoiding 'prop drilling'.
snippet.js
javascript
1
2
3
4
5
// In Ancestor Componentprovide('userTheme', 'dark-mode');// In Deeply Nested Child Componentconst theme = inject('userTheme');
vue
Breakdown
1
provide('key', value)
The parent defines a key and a value to make available to descendants.
2
inject('key')
The child retrieves the value associated with the key from its ancestors.