Vue Tip: Avoid Prop Drilling using Provide & Inject

Описание: Props are the standard way to pass data from the parent to a child component.

This works well in simple scenarios but has some drawbacks if a deeply nested component needs data from a distant ancestor component. Imagine a longer component chain between the parent and the deep child component; all would be affected along the way. This is called "prop drilling" and is no fun for us developers.

Usually, we solve this problem by using state management solutions like Pinia.

But sometimes, we want to share data from a parent component to all its children components without using a store. If you are using Vue 2, you must either use a state management solution or pass the props down to the deeply nested component.

Vue 3 introduced a new concept to solve prop drilling with provide and inject.