Uso de Props en Composition API de Vue.js

¿Cómo se utilizan los props en la Composition API de Vue.js?

En Vue.js, el uso de props es fundamental para comunicar datos entre componentes. Aunque podrías estar familiarizado con su implementación en Options API, en esta clase, aprenderás a hacerlo con la Composition API. Este enfoque no solo es flexible, sino que también mejora la reactividad de tus proyectos con Vue.js.

¿Cuál es el valor de los props en Vue.js?

En el contexto de Vue.js, los props son atributos que se pasan desde un componente padre a un componente hijo y que permiten compartir datos entre componentes. Al definir los props en el componente hijo, puedes establecer:

• Tipo de dato: Para asegurar que los datos recibidos son del tipo correcto, como string, number, etc.
• Valor por defecto: Define un valor por defecto en caso de que el prop no se envíe desde el componente padre.
• Requerido: Indica si el prop es obligatorio (true o false).

¿Cómo se definen los props en Composition API?

Para utilizar los props en Composition API, primero debes definirlos en el componente hijo. Supongamos que deseas pasar un nombre y apellido desde el componente App al componente Home. En Home.vue, definirías los props así:

props: {
  firstName: String,
  lastName: String
}

En el componente padre (App.vue), los pasarías de esta manera:

<Home firstName="Diana" lastName="Martínez" />

¿Cómo se leen los props en la función setup?

Dentro de la Composition API, el método setup es el lugar donde leerás los props. La función setup recibe dos argumentos: props y context (aunque este último lo veremos en profundidad en otra lección).

Conversión de props a referencias reactivas

Por defecto, los props no son reactivos, lo que podría causar que no detecten cambios si los valores se modifican dinámicamente. Para solucionar esto, Vue.js ofrece la función toRefs, que convierte un objeto plano en referencias reactivas:

import { toRefs } from 'vue';

export default {
  setup(props) {
    const { firstName, lastName } = toRefs(props);
    return { firstName, lastName };
  }
}

¿Por qué usar toRefs?

Usar toRefs es crucial cuando deseas que los cambios en los datos desde el componente padre se reflejen automáticamente en el hijo. Sin toRefs, los props actuarían como objetos estáticos en lugar de reactivos.

¿Cómo combinar props con otras características de Vue.js?

La Composition API ofrece la flexibilidad para combinar props con otras características de Vue.js, como computadas y watchers. Por ejemplo, podrías definir un watcher para monitorear cambios en firstName y ejecutar alguna acción cuando sucedan. Esto fomenta la reactividad y la modularidad en tus aplicaciones:

watch(firstName, (newValue, oldValue) => {
  console.log(`El nombre cambió de ${oldValue} a ${newValue}`);
});

Consejos y reflexiones finales

Explorar la funcionalidad de los props en Composition API no solo mejora la estructura y reactividad de tus aplicaciones, sino que también te proporciona un gran control sobre los datos entre componentes. No dudes en experimentar con diferentes características de Vue.js, como computeds, watchers, y refs, para enriquecer tus proyectos. ¡Comparte tus hallazgos y sigue aprendiendo!