PROPS EN VUE.JS: CÓMO FUNCIONAN Y EJEMPLOS

En VueJS, las props son propiedades que se pasan de un componente padre a un componente hijo para compartir datos. A continuación, se muestra un ejemplo de cómo usar props en VueJS con Single File Components (SFC) usando la Options API:
Coponente Hijo (/components/Hijo.vue): Este componente recibe una prop llamada mensaje y la muestra en la plantilla.:

<template>
  <div>
     <h2>Mensaje recibido: {{ mensaje }} </h2>
  </div>
</template>

<script>
export default {
  name: 'Hijo',
  props: {
    mensaje: {
 type: String, // Tipo de dato esperado
 required: true // Indica que la prop es obligatoria
    }
  }
}
</script>

<style>
h2 {
  color: green;
}
</style>
Componente padre (App.vue): Este componente importa el componente hijo y le pasa la prop mensaje.

<template>
  <div>
 <h1 >Componente Padre  </h1 >
 <Hijo mensaje="¡Hola desde el padre!" / >
</div>
</template>

<script>
import Hijo from './components/Hijo.vue';

export default {
  name: 'Padre',
  components: {
    Hijo
  }
}
</script>
Explicación del código:
  • Definición de la prop:En Hijo.vue, la prop mensaje se define en la opción props con un tipo (String) y la restricción required: true para asegurar que siempre se pase un valor.
  • Paso de la prop: En "app.vue", la prop mensaje se pasa al componente Hijo como un atributo en la etiqueta <Hijo≶ El valor "¡Hola desde el padre!" se envía al hijo.
  • Uso en el hijo: El componente Hijo usa la prop mensaje directamente en su plantilla con "{{ mensaje }}"