No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Componentes de Vue con Composition API y props

26/37
Recursos

Aportes 10

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Un poco lioso la forma de organizarlo

Esta es la forma en la que los padres se comunican con los hijos dentro de Vue, para el caso de Composition, si siguieron la recomendación de destructurar el prodState, en este caso simplemente hay que sustituir la destructuración del prodState por la destructuración de props.
.
Básicamente, todo lo que esté dentro del props que definimos en los componentes son todos los datos que le está mandando el componente padre al componente hijo. por eso es que “recibimos” la propiedad del componente padre en props.
.
Una forma un poco más elegante de escribir los atributos de props es hacerlo mediante un objeto JSON que especifica ciertas características de un atributo que se va a recibir, por ejemplo:

props: {
    product: {
        required: true,
        type: Object,
        default: () => {},
        validator: (value) => {
            return true;
        }
    }
}

En este caso, hacemos que el dato que queramos recibir desde el padre tiene que cumplir unas ciertas reglas (de lo contrario arrojará error), por ejemplo, debe ser requerido que el padre le mande el producto a dicho componente, debe ser de tipo Object, por defecto podemos poner un objeto vacio (en caso en que required sea false), e incluso podemos meter una validación de los datos que mande el padre.
.
Son pequeñas cositas que Vue permite hacer, dejo el código de esta clase:
.
https://github.com/RetaxMaster/vue3-platzi-commerce/tree/d2bc632704c097018a03675de04b75be0664bc35

En el minuto 7:46 no está funcionando lo que hace, está repitiendo el contenido estático (CAMARA) del archivo product.js, no de la lista products del archivo index. En la pestaña superior del archivo product.js se ve que el archivo fue modificado pero no lo guardó, entonces el sistema sigue tomando la version vieja. Si lo tomamos tal cual como está da un error, el código tal como está debería fallar, solo que tiene dos fallas juntas y una falla oculta a la otra. Porque el elemento product del archivo js realmente está vacío y el nombre de los productos del index.html no coincide con lo que se muestra en el navegador

También se podría des-estructurar:

setup({ producto }) {
....
}

entonces props ¿sirve para pasar del padre al hijo datos?

Definitivamente me gusta mucho más OptionAPI que CompositionAPI, sobre todo cuando modulamos el option y con eso tenemos las ventajas del composition

¿Es una mala practica pasar las funciones dentro del setup del componente?

Hola, siento que cuando muestran una opción junto a otra, es más pesado de aprender. Creo que si se aprende una en un curso y luego la otra forma en otro sería más fácil de comprender. Siento que cuando son conocimientos nuevos, hace más daño que bien, combinarlos, es mi punto de vista.

Si ya saben vue2, intenten hacer todo el ejercicio en options, y despues haganlo en composition, es una muy buena practica.
En mi caso me quede como 10 minutos leyendo el codigo para entender que no habia retornado los products y por eso me salia la pantalla vacia jajaja xD

Podemos utilizar las herramientas de búsqueda (ctrl + f) o remplazo (ctrl + h)de Visual Studio Code para cambiar las variables en vez de buscar linea por linea.