Vue JS Provide/inject And Props

When should provide/inject be used compared to props. In my opinion props make component more meaningful. Provide/inject makes components tightly coupled. What are the use cases w

Solution 1:

Here are some differences that helped me choose in many situations

1. props are reactive and provide / inject is not.
2. props can only be used on direct child components.

From docs:

Provide / inject are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain. If you are familiar with React, this is very similar to React’s context feature.

3. You can use provide / inject to set a default value for props.

example:

const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

Here is an article of a good example when to use provide / inject