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?

o inicia sesi贸n.

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 鈥渞ecibimos鈥 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.