Provide + Inject in VueJs

When we need to pass data between the two components, we stick to using the props. But think, when we have a significant number of components and there is a hierarchy of getting into the last component from the parent component, this will become more complex with the use of props. So there comes the provide and inject methods to support the props drilling. Let’s have a look into it.

Provide and Inject is a pattern that you can use to provide data in one place and inject it, and use it in another place. The parent component can save as a dependency provider for all its descendants. Regardless of its depth, any component in the descendant tree has the ability to inject dependencies that were provided by components higher up in the parent chain.

Provide

This is used to provide data to child components from the parent component.

provide:{
    message : 'This is using provide + inject'
}

Now you provide the message values to its child components. This is using an internal mechanism built into vue. But providing is only half of the mechanism as we also need to listen to that provided data. We need to use that provided data somewhere. So here comes the Inject method.

Inject

We use the inject option to get the data that is sent from the parent component.

provide:{
  inject: ['message'],
  created() {
    console.log(this.message) // This is using provide + inject 
  }
}

Inject, basically act like props. when you provided the data from the ‘message’ variable, the child component will get that data through the reference keyword ‘message’.

You can only inject what has been provided on a higher-up level. This basically means, that in a parent component, or an ancestor component.

Provide and inject needs the parent-child relation. So you can not provide and inject between neighbor components. Let’s see how can we send the array of objects using inject + provide.

We now need to convert the provide to a method. In there, we need to return the provided object and we can set up any keys of your choice.

To get these provided array objects, we can use the inject option.

We received the “topics” array of elements and display it in a list with the use of the “Inject” option in vue js. The following image shows, how we displayed it.

Output view

You can access the project here.

Provide + Inject for functions/ methods

We can use provide inject also for custom events by implementing them a bit differently. Let’s take an example which having the function as an inject option.

So in here, “selectMsg” is a function that is executed when the “Select Msg” button clicks. Now injecting is not enough as we also need to provide it.

Here, in the provided option, we point to the selectMsg method which eventually updates the selectMsg value.

Display the output

You can access the project here.

From the above examples, We can use the provide and injects to pass data between multiple components in a much more simple way.

If data needs to be passed across multiple components(“pass-through”), you can use provide/inject.

Provide data in a parent component, and inject it into a child component.

So this is all about provide and inject in vuejs. Hope you understand the tutorial well. Hope to see you in the next tutorial. Until then, bye!