provide e inject en Vue Composition API

Curso de Vue.js: Componentes y Composition API

Contenido del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

23
Qué aprendiste en el curso de Vue.js 3
01:29 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:00

provide e inject en Vue Composition API

Curso de Vue.js: Componentes y Composition API

Clase 19 de 23

Clase 19 / 23

Recursos

Comunicar componentes profundamente anidados en Vue.js puede volverse un dolor de cabeza si dependes solo de props. Con provide e inject en Composition API logras enviar datos del componente padre a cualquier descendiente sin pasar por capas intermedias, escribiendo menos código y manteniendo la reactividad cuando la necesitas.

¿Qué resuelve provide e inject en Vue.js?

Cuando tu árbol de componentes crece, pasar información de App.vue hasta un nieto o bisnieto usando props obliga a contaminar componentes intermedios con datos que no les pertenecen. Provide e inject evitan ese recorrido manual.

¿Qué es provide e inject en Vue.js? Es el mecanismo que Vue ofrece para que un componente padre exponga valores y cualquier descendiente los consuma directamente, sin necesidad de pasarlos como props nivel por nivel.

En Composition API la lógica es la misma que en Options API, pero en lugar de declararlos dentro de un objeto de configuración, los usas como funciones dentro de setup.

¿Cómo declarar provide dentro de setup?

Lo primero es importar la función desde Vue y ejecutarla dentro de setup. No necesitas envolverla en otra función, aunque podrías hacerlo si quieres organizar la lógica en métodos internos.

El patrón básico se ve así:

js import { provide } from 'vue'

export default { setup() { provide('username', 'dianamert') } }

La función recibe dos argumentos: el nombre con el que identificas el valor y el valor en sí. Ese valor puede ser una constante, una variable común o una referencia reactiva creada con ref.

Constante: útil cuando el dato no cambia, como un username fijo.
Variable reactiva con ref: ideal si quieres que los descendientes reaccionen a los cambios.
Objeto o función: también es válido, dependiendo de la lógica que necesites compartir.

Guardas el cambio en App.vue y ese valor queda disponible para todo el árbol descendente.

¿Cómo recibir el valor con inject en el componente hijo?

En el componente que va a consumir el dato, importas inject y lo ejecutas dentro de setup pasándole el mismo nombre que usaste en provide.

js import { inject } from 'vue'

export default { setup() { const username = inject('username') return { username } } }

Una vez que la variable existe dentro de setup, puedes usarla en métodos, funciones computed, watchers o exponerla en el return para que el template la renderice. En el ejemplo de la clase, el username aparece debajo del full name en el componente Home.vue después de agregarlo al return.

¿Por qué provide e inject no es reactivo por defecto? Porque al pasar valores planos, Vue no rastrea sus cambios. Para hacerlo reactivo debes envolver el dato con ref o reactive antes de proveerlo.

Esto significa que si pruebas con un counter usando ref, los componentes hijos que lo inyecten verán los cambios automáticamente cada vez que el valor se actualice.

¿Por qué Composition API simplifica este patrón?

Al comparar el mismo ejercicio con su versión en Options API, salta a la vista que Composition API genera código más corto y legible. No tienes un JSON gigante de configuración con secciones separadas para data, methods, provide o inject.

Las ventajas concretas que se notan en este ejercicio:

Menos líneas de código para lograr exactamente el mismo comportamiento.
Toda la lógica relacionada vive dentro de setup, lo que mejora la cohesión.
La reactividad sigue intacta usando ref cuando la necesitas.
Es más fácil mover lógica a composables reutilizables.

Después de ver lo sencillo que resulta, vale la pena que pruebes este patrón con un counter reactivo: provee un ref desde App.vue, inyéctalo en un descendiente y observa cómo cambia el valor en tiempo real. Comparte tus pruebas en los comentarios y cuéntame qué casos de uso le encontraste a provide e inject en tus propios proyectos.

Comentarios (10)10 comentarios

Carlos Rodríguez

Hace 4 años

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

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

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);
  },
}

Josue Cerron Tuesta

Gracias por compartir!

Joel Gutierrez

Hace 3 años

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 Angel Reyes Moreno

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

<template>
  <h3>{{ fullName }}</h3>
  <h4>Username: {{ username }}</h4>
  <h4>Age: {{ age }}</h4>
</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>

Jose Luis Barboza Gonzales

talvez porque los declaraste con let

Daniel Guarín García

no es pq era toRefs en vez de toRef?

Miguel Ángel Murillo Ramírez

Provide e inject es para evitar props con hijos de hijos etc, cuál sería la solución para los emits, es decir si yo quiero un disparar un evento desde un hijo de un hijo, al archivo padre. o si cambio el objeto inyectado se cambia donde provenía también?

Diana Martinez

Va a depender de lo que quieras hacer, pero creo que si eso pasa, lo más probable es que necesites estructurar tus componentes de otra manera, ya que es señal de acoplamiento (menos reusabilidad), y si es por manejo de estado, entonces puedes recurrir al manejo de estado por fuera del componente, por ejemplo con Composables, o una librería de manejo de estado cómo Vuex, ahora Pinia.

fabio andres zamora osorio

¿Como provide / inject hace los mismo que props pero con la funcionalidad extra de comunicar componentes profundos seria buena practica usar siempre provide / inject en lugar de props?

Provide/Inject son una solución a un problema llamado prop-drilling, que es cuando te ves pasando props de un componente a su hijo y el hijo al nieto y así, pasando props que componentes intermedios no necesitan, con tal de que le lleguen a un componente más profundo.

Como el prop-drilling es un problema, se inventó provide/inject, y en esos casos es lo más recomendable, ahora, si puedes encontrar una forma de estructurar tu código para usar props, sin tener prop-drilling, siempre es mejor usar props.

Provide/inject debería ser usado con cuidado, ya que por su naturaleza, no es fácil saber desde un componente, que variables se le han inyectado para poder usar o cuáles no, etc.

Entiendo que provide e inject se usan para enviar datos de un componente padre a un componente profundo ya sea un nieto, bisnieto, etc. ¿Pero si uno quisiera hacer lo contrario, osea enviar datos de un componente nieto a un componente abuelo eso se podria lograr con provide e inject ?

Si haces que sean reactivos, podrías hacer que se pase un dato a un nieto, y que al editarlo en el nieto, se vea reflejado en el padre.

Pero en la mayoría de los casos, para comunicar de hijos a padres, es mejor usar eventos.

Hector Alejandro Jimenez Lopez

vue js es pésimo loco, wtf con este framework.

Edwin Jesús

¿Por qué?

Alex Yarkan

practicalo, es muyinteresante...

Jose Ever Muñoz Muñoz

¿còmo se vuelve reactivo el valor inyectado? no lo explican :v

Introducción

Options API vs Composition API en Vue 3

Crear y configurar proyectos con Vue CLI

Estructura de archivos en proyectos Vue CLI

Built-in Components

Componentes dinámicos con Vue.js

Componentes asíncronos con defineAsyncComponent

Transiciones con fade en Vue.js

Teleports en Vue 3 para mover modales al DOM

Componentes personalizados

Virtual DOM en Vue.js explicado

Hooks del ciclo de vida en Vue.js

Hooks del ciclo de vida en Vue con ejemplos

Mixins en Vue.js: reutilización con riesgos

Composition API

Composition API: setup en Vue 3

Hooks del ciclo de vida en Vue 3 setup

`ref` y `reactive` en Vue Composition API

Watchers con Composition API en Vue.js

Propiedades computadas con Composition API

Props reactivos con toRefs en Vue.js

El argumento context en Vue 3 setup

provide e inject en Vue Composition API

Template Refs en Vue 3 con Composition API

Composition API vs Options API en Vue.js

script setup en Vue 3 sin export default

Cierre del curso

Qué aprendiste en el curso de Vue.js 3

provide e inject en Vue Composition API

Progreso del curso

Introducción

Built-in Components

Componentes personalizados

Composition API

Cierre del curso

Recursos

Recursos