API de composición de Vue.js usando Provide

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación.

La API de composición de Vue.js proporciona una herramienta útil para proporcionar e inyectar. A veces, el elemento principal puede querer pasar algunos datos al elemento secundario o al elemento secundario anidado. En ese caso, los datos se transmiten a todos los niños intermedios. Por lo tanto, una mejor manera es utilizar provide() , que proporciona el valor y puede ser utilizado por cualquier descendiente o elemento secundario anidado.

Provide() en la API de composición toma 2 parámetros, que se describen a continuación:

• Clave : puede ser una string o una clave de inyección que debe ser única para obtener los datos transmitidos correctamente.
• Valor : puede ser una string o un objeto que contiene varios valores.

Sintaxis : Llame a la función de provisión dentro de la función setup() del script. Pase el par clave-valor a la función provide().

setup() {
  provide("message", "Welcome to GeeksforGeeks");
},

Ejemplo : en el siguiente ejemplo, usaremos la función provide() para enviar un mensaje a un elemento secundario que lo recibirá y lo mostrará.

Paso 1 : Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Paso 2 : En el directorio src/ en la carpeta del proyecto, cree un nuevo archivo y asígnele el nombre MessageComp . vista _

Estructura del proyecto : después de una instalación y creación exitosas del nuevo archivo, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 3 : en el archivo App.vue , registre MessageComp . vue , y luego dentro de la función setup() , llame a la función provide y pase el valor con la clave. En la sección de plantillas, tendremos el componente MessageComp con algunos otros elementos.

<script>
import { provide } from "vue";
import MessageComp from "./MessageComp.vue";
export default {
  setup() {
    provide("message", "Welcome to GeeksforGeeks");
  },
  components: { MessageComp },
};
</script>
  
<template>
  <center>
    <h1 style="text-align: center; 
        color: green">
        GeeksforGeeks
    </h1>
    <strong>
        Vue.js Composition API using Provide
    </strong>
    <br />
  </center>
  <MessageComp></MessageComp>
</template>

Paso 4 : dentro de MessageComp.vue , llame a la función de inyección para obtener el valor de la clave. Luego devuelva los datos obtenidos para que sean accesibles a la sección de plantilla.

<script>
import { inject } from "vue";
  
export default {
  setup() {
    const message = inject("message");
    console.log(message);
    return { message };
  },
};
</script>
  
<template>
  <p style=
      "text-decoration: underline; 
     color: green">
     {{ message }}
  </p>
  
</template>

Paso 5 : Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Salida : al compilar correctamente el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

 

Referencia: https://vuejs.org/api/composition-api-dependency-injection.html#provide