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
VueJS solves this problem by using the
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.