How to use “Provide / Inject” | Vue 3

There are a few ways you can pass data in between components, we have provide/inject and props.

We’ll see why props could be the answer but we’ll mainly focus on why you would want to use provide/inject instead.

Why not Props?

When you need to share values between components, Vue’s provide and inject methods should be considered instead of props.

Props and provide/inject can both be used for this, but there are some significant differences between the two methods.

The direction of data flow between provide/inject and props is one of their main differences. Props allow data to pass through the component hierarchy from a parent component to its children. This means that the data must be explicitly passed to the children by the parent component.

On the other hand, provide/inject allows a component to make a value available to its children, without the need for the parent to explicitly pass the value to each child.

This can make it easier to share values between components that are not directly related in the component hierarchy. If you need some graphical representation of this concept you can visit this link to Vue’s official site.

The manner in which the shared values are accessed differs between provide/inject and props yet again.

A child component can use the props object to access the passed-down values when using props. With inject, the shared values are made directly accessible on the component instance, which can make them easier to access and use.

How to use Provide/Inject

To use the provide and inject methods, you need to first specify a key that will be used to identify the value being shared. Then, the parent component can use the provide method to make the value available to its children, and the child component can use the inject method to access the value.

Here is an example of how you can use the provide and inject methods in a Vue.js application:

// Parent component
export default {
  provide: {
    myValue: 'hello'
  },
  // ...
}

// Child component
export default {
  inject: ['myValue'],
  mounted () {
    console.log(this.myValue); // 'hello'
  }
}

In this example, the parent component is using the provide method to make the value 'hello' available to its children. The child component is using the inject method to access this value, and it is logging the value to the console when it is mounted.

Here is another example to pass data at App-level:

import { createApp, defineAsyncComponent } from 'vue';
const SomeComponent = defineAsyncComponent(() => import("./SomeComponent.vue"));

const app = createApp(SomeComponent);
app.provide(/* key */ 'message', /* value */ 'the message here!');
app.mount('#someSelector');

And like I said before, the provide and inject methods are useful for sharing values between components that are not directly related in the component hierarchy. This can be useful for cases where you want to share values across different parts of your application, without having to pass the values down through multiple levels of the component hierarchy.