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.

Connect with me on Twitter and LinkedIn.