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 8

Preguntas 3

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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

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

También se podría des-estructurar:

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

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

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

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

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.