Photo by Alex Litvin on Unsplash
The Prop Drilling Problem And How To Solve It In Vue JS
The Provider Pattern In VueJS
In VueJS and many other frontend frameworks, we use the props down approach where data that needs to be accessed by a child component is sent via props. However, there can be situations where the child that needs to access a given prop is deeply nested in the component tree. The commonest pitfall is passing the data through several other child components till it reaches the actual child that needs the data, this is what is called Prop Drilling
.
VueJS solves this problem by using the provide
and inject
options. The provide
option allows the parent component to make available data to its descendants irrespective of their position in the component tree while the inject
option allows a child component to access data that was made available through the provide
option from its parent.
For a more detailed explanation and examples check out the official VueJS Docs.