Uso de props en Vue3

Uso de Props en Vue3

¿Qué son las “Props” y para qué sirven?

Son propiedades que se pueden pasar de un componente padre a un componente hijo.

Las “Props” son una manera fundamental de comunicación entre componentes en Vue.js y permiten construir aplicaciones más modulares y reutilizables.

Podemos pasar diferentes datos como:

•  String: Cadenas de texto.
• Number: Números.
• Booleans: Valores true/false.
• Object: Objetos de Js.
• Array: Listas, ya sean de tipos básicos o de tipo objetos.
• Function: Funciones.

Sirven para para comunicar componentes entre si, esto permite la reutilización de componentes y poder tener una mejor organización, lo que nos facilita el mantenimiento o la implementación de más funcionalidades en una aplicación.

Sobre todo, son utilizados para poder dividir un componente en componentes más pequeños, con esto podemos desacoplar la lógica del componente padre en diferentes componentes hijos más especializados.

¿Cómo se usan?

Para poder usarlas en otro componente, hay que definirlas en el componente en el que las queremos usar, mediante el método “defineProps()”.

(EN EL COMPONENTE HIJO)

En la parte del script es donde la definimos las props a recibir:

<script setup>
defineProps({
 msg: {
  type: String,
  required: true,
 },
});
</script>

En la parte de la template haremos uso de estas invocándolas con dobles llaves “{{ }}”

<template>
 <div>
  <h1>{{ msg }}</h1>
 </div>
</template>

(EN EL COMPONENTE PADRE)

En el componente padre solo será necesario tener declarado en el script el dato que queremos pasar al componente hijo. Y en la template le  pasamos el valor al componente mediante la directiva v-bind, esta directiva se puede escribir de forma corta solo cambiando
 “v-bind:” por solo “ : ”.

<template>
  <div>
    <ComponenteHijo :msg="Texto de msg" />
  </div>
</template>

Hay que recordar que las props son unidireccionales (del Padre al Hijo), por lo que si cambiamos algún dato en el padre los datos serán directamente reflejados en el componente hijo.

Pero, si queremos utilizar una comunicación de  datos en ambos sentidos deberíamos considerar el uso de un gestor de estados como podría ser VueX o Redux.

Autor/a: Cristian Bolarin

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS 

Centro: Tajamar Tech 

Año académico: 2023-2024