[Vue3] Send Data from Ancestor Component using Provide and Inject

We can send data from a parent component to a child component using props.

However, the deeper the hierarchy, the more redundant delivery, the more complexity of the code.

In this situation, you can simply use provide and inject.

Just use provide where you want to send data and use inject where you want to use the data.

Create a Project

Please create a project to test this feature.

2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS

And, add some files.

components
  |-- pi_parent.vue
  |-- pi_child1.vue
  |-- pi_child2.vue

The hierarchy is like this.

pi_parent.vue
  |-- pi_child1.vue
          |-- pi_child2.vue

Now, put this code into the files.

 

components/pi_parent.vue

<template>
  <div class="p-4 flex flex-col justify-center items-center">
    <h1 class="text-2xl font-medium text-green-400">Provide / Inject</h1>
    <PIChild1 class="mt-8" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PIChild1 from "./pi_child1.vue";

export default defineComponent({
  name: "ProvideInject",
  components: { PIChild1 },
});
</script>

pi_parent contains pi_child1.

 

components/pi_child1.vue

<template>
  <PIChild2 />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PIChild2 from "./pi_child2.vue";

export default defineComponent({
  name: "PIChild1",
  components: { PIChild2 },
});
</script>

And pi_child1 contains pi_child2.

 

components/pi_child2.vue

<template>
  <h2 class="mt-8 mb-2 text-xl font-medium text-green-600">PI Child2</h2>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "PIChild2",
});
</script>

 

App.vue

<template>
  ...
  <PIParent />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import PIParent from "./components/pi_parent.vue";

export default defineComponent({
  name: "App",
  components: {
    PIParent,
  },
});
</script>

And App.vue contains pi_parent.

Provide

pi_parent will provide the data to all of its descendants.

 

components/pi_parent.vue

<script lang="ts">
  ...
  data: () => {
    return { 
      items: ["item1", "item2", "item3"]
    };
  },
  provide: function () {
    return {
      itemLength: this.items.length,
    };
  },
});
</script>

pi_parent defines items variable as an array with three items.

And it provides the variable's length as named itemLength.

Inject

pi_child2 uses the data provided by the ancestor without props relay.

 

components/pi_child2.vue

<template>
  <h2 class="mt-8 mb-2 text-xl font-medium text-green-600">PI Child2</h2>
  <div>{{ itemLength }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "PIChild2",
  inject: ["itemLength"],
});
</script>

 

It's very simple!

You just need to use the data as the provided name.

Conclusion

In this posting, we learned how to send data from an ancestor to descendants without any redundant props relay.

You just use provide where you want to provide data and use inject where you want to use the provided data.

All you have to be careful about is using the same name.