Un poco lioso la forma de organizarlo
Introducción: fundamentos de Vue.js
¿Cómo convertirte en frontend developer con Vue.js?
La magia de aprender JavaScript
¿Qué es Vue.js? Frameworks, librerías y componentes
Declarative rendering con JavaScript
Declarative rendering con Vue.js
Reactividad a profundidad
¿Qué es la reactividad?
¿Qué es un Proxy?
Crea tu propio miniframework: MiniVue
Implementando un Proxy en MiniVue
Implementando Reflect en MiniVue
Reactividad con effect, track y trigger
Implementando effect, track y trigger en MiniVue
Templates de Vue.js
Disclaimer sobre los Templates
Proyecto: PlatziCommerce con Vue.js
Expresiones
Atributos
Conditional rendering
List rendering
Event handling
APIs internas de Vue.js
Options API vs. Composition API
data() y ref()
Métodos personalizados con Options API
Métodos personalizados con Composition API
reactive()
Segunda capa: componentes de Vue.js
Componentes de Vue con Options API
Componentes de Vue con Composition API y props
Reto con componentes
Custom events o eventos personalizados con Options API
Custom events o eventos personalizados con Composition API
Watchers con Options API
Watchers con Composition API
Computed properties con Options API
Computed properties con Composition API
Ciclos de vida de un componente
Ciclos de vida de un componente: Composition API
Siguientes pasos
Continúa tu ruta de aprendizaje profesional con Vue.js
Siguientes pasos con Vue.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Samuel Burbano
Aportes 10
Preguntas 5
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?
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.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?