Provide / Inject

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

How to use provide and inject with the Composition API in Vue.js?

In the world of Vue.js, passing data between components can become a complicated task if you don't use the right tools. This is where provide and inject come into play, offering an elegant solution for sharing data between a component and its descendants. This mechanism avoids the need to manually pass data through each hierarchical level of a component, which could result in messy code and unnecessary props.

Implementation in Composition API

When using provide and inject with the Composition API, we must work within the setup function. This is a significant change from the Options API, as we move from JSON configurations to functions that offer greater flexibility and readability.

Create provide in the main component

Configure setup: We start by creating the setup function in the main component.

import { provide } from 'vue';
export default { setup() { // Define the value to provide provide('username', 'DianaNerd'); } }}

Define value: We use provide to set a key-value pair, where 'username' is the key to be shared with descendant components.

Receiving values in child components with inject

To receive the values provided in a child component, we use inject, which must also be called inside the setup function.

Import inject: We add inject inside the import from Vue.

import { inject } from 'vue';
export default { setup() { // Receive the provided value const userName = inject('username');
 return { userName };} }}

Access the values: we create a variable in setup that receives the injected value, so that it is available in the component's template.

Reactivity in provide and inject

It is crucial to know that, by default, using provide and inject does not generate reactivity. To achieve this behavior, you will need to use tools like ref when defining values in provide. This will allow the values to be reactive and reflect changes automatically.

import { provide, ref } from 'vue';
export default { setup() { const username = ref('DianaNerd'); provide('username', username);    
 return { username }; } }}

Advantages of using Composition API

Switching from Options API to Composition API not only improves code organization, but also significantly reduces the number of lines required to perform the same operations. This approach not only improves code readability and maintainability, but also promotes a cleaner and more functional environment in Vue.js.

Recommendations

We encourage you to practice with provide and inject, applying reactivity and creating test projects. Experiment with use cases, such as a counter, to better understand these tools and their benefits in the data flow of your components. Share it with the community to get feedback!

Contributions 7

Questions 3

Sort by:

Want to see more contributions, questions and answers from the community?

Carlos Rodríguez

3 years ago

Si quieren actualizar el username desde el nieto hacia el padre así como si usaramos un emit() cuando necesitamos comunicar de hijo a padre, lo hacemos de la siguiente manera:

Declaramos desde el provider (padre) una variable tipo objeto que contenga la constante y el método que hace la actualización, obviamente la constante debe ser reactiva

const username = ref('');
provide('username', { username, updateUsername });

Ahora desde el inject (nieto) podemos obtener ambas variables (constante y método) y usarlas cuando querramos de la siguiiente manera

const { username, updateUsername } = inject('username');

Muy fácil.

Juan Guillermo Perez Cardozo

3 years ago

para volver la variable reactiva la puse asi:

const username = ref(inject("username"));

aunque funcione no se , si sea mala practica

Andrés Felipe Perdomo Alvarado

3 years ago

Para volver username reactivo, lo realicé volviendo reactiva la variable antes de poveerla con provide()
Archivo: App.vue

export default {
  setup() {
    const username = ref("pruebas2");
    provide("username", username);
  },
}

Joel Gutierrez

2 years ago

Provide / Inject : Es la forma de pasar props (valores) de componentes abuelos a nietos, bisnietos, tataranietos, etc. de una forma mas optima. El valor no es reactivo, es importante usar toRefs() para hacerlo reactivo.

Miguel Ángel Reyes Moreno

3 years ago

Logré hacer que cambie el valor de username, pero no se muestra el cambio en la vista, ¿por qué será?

<template>
  <h2>{{ fullName }}</h2>
  <h3>Username: {{ username }}</h3>
  <h3>Age: {{ age }}</h3>
</template>

<script>
import { ref, computed, inject, toRef } from "vue"

export default {
  props: {
    firstName: {
      type: String,
      default: "John",
      required: true,
    },
    lastName: {
      type: String,
      default: "Doe",
      required: true,
    }
  },

  setup(props, context) {
    console.log(context)

    const firstName = ref("Miguel")
    const lastName = ref("Reyes")

    let username = toRef(inject("username"))._object
    console.log(username)
    setTimeout(() => {
      username = "David!"
      console.log(username)
    }, 2000)
    const age = inject("age")

    return {
      fullName: computed(() => `${firstName.value} ${lastName.value}`),
      username,
      age,
    }
  }
}
</script>

<style>
</style>