¿En qué casos se utiliza más la forma de codificar en Options y en cuáles la de Compositions?
Introducción: fundamentos de Vue.js
Programación Reactiva con Vue.js 3
Programación Reactiva con Vue.js: Fundamentos y Prácticas
Vue y Progresividad: Frameworks y Capas Esenciales
Renderización Declarativa con JavaScript: Manera Fácil
Capa declarativa de Vue: Conectando datos y presentación
Reactividad a profundidad
Sistemas Reactivos: Paradigmas y Ejemplos Prácticos
Proxies en JavaScript: Control y Seguridad de Datos
Creación de Framework JavaScript con Reactividad Básica
Proxies en JavaScript: Trampas y Reactividad
Uso de Reflect y Trampas en JavaScript Avanzado
Programación Reactiva: Efectos, Tracks y Triggers en JavaScript
Creación de un Mini Framework Reactivo con Trackers y Triggers
Templates de Vue.js
Buenas prácticas en Templates de HTML con Vue.js
Desarrolla una Tienda eCommerce Interactiva con Vue.js
Expresiones
Atributos Dinámicos en Vue.js: Clases y Estilos Reactivos
Rendering condicional en Vue.js: uso de v-show y v-if
Renderizado de Listas con VueJS: Directivas y Estilos Dinámicos
Eventos en Vue JS: Dinamismo y Funcionalidad en HTML
APIs internas de Vue.js
Options API vs. Composition API
Diferencias clave entre Options API y Composition API de Vue.js
Métodos en Vue JS: Crear y Validar Descuentos en Options API
Creación de Métodos en Composition API de Vue.js
Uso de Reactive en Vue Composition API
Segunda capa: componentes de Vue.js
Creación de Componentes Personalizados en Vue.js
Conexión de Props en Vue: Composition vs Options API
Crear Componentes Personalizados en Vue.js
Eventos Personalizados en Vue desde Componentes Hijos a Padres
Eventos Personalizados con Composition API en Vue.js
Watchers en Vue para Componentes Reactivos
Creación de Watchers Personalizados en Vue Composition API
Propiedades Computadas en Vue: Simplifica la Reactividad
Propiedades Computadas en Composition API de Vue.js
Ciclos de Vida en Vue: Gestiona Componentes con Options y Composition API
Ciclos de Vida en Vue.js: Composition API vs Options API
Siguientes pasos
Curso práctico de reactividad en Vue.js 3
Reactividad en Vue: Efectos, Ciclos y Computadas
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
El Composition API en Vue.js ha revolucionado la manera en que trabajamos con los componentes. Nos permite escribir código más modular y reutilizable. A través de este enfoque, podemos definir fácilmente eventos personalizados para comunicar los componentes hijos con los componentes padres. Veamos cómo implementar estos eventos utilizando Composition API, una de las herramientas más poderosas y flexibles que ofrece Vue.js.
Imaginemos una tienda en línea donde los usuarios pueden agregar productos a su carrito de compras. Cada vez que un producto se añade al carrito, se debe emitir un evento para que el componente padre actualice el estado del carrito. Sin embargo, cuando trabajamos con Composition API nos enfrentamos al reto de que estos estados no siempre están disponibles desde los componentes hijos. Debemos entender cómo emitir eventos de manera eficiente para superar este obstáculo.
Para empezar, es vital definir el evento que el componente hijo lanzará al componente padre. Supongamos que nuestro evento se llama sendToCart
. En nuestra función setup
del componente hijo, debemos utilizar el contexto que Vue nos proporciona para emitir este evento:
// Dentro de la función setup del componente hijo
setup(props, { emit }) {
const sendToCart = () => {
emit('sendToCart', props.product); // Emite el evento con la información del producto
};
return {
sendToCart
};
}
Es esencial devolver esta función desde setup
para que esté disponible en el template del componente.
Una vez que el evento está definido en el componente hijo, el paso siguiente es escucharlo en el componente padre. Esto se realiza añadiendo un listener en el template del componente donde se despliegue el componente hijo:
<template>
<Product @sendToCart="handleAddToCart"></Product>
</template>
En el script del componente padre, definimos handleAddToCart
, que ejecutará la lógica correspondiente al agregar el producto al carrito:
setup() {
const handleAddToCart = (product) => {
// Lógica para añadir el producto al carrito
console.log('Producto añadido:', product);
};
return {
handleAddToCart
};
}
Un problema común es que las propiedades del estado no siempre están disponibles directamente desde el componente hijo. Es importante quitarlas de donde no se utilizan y trasladarlas al componente donde realmente se necesitan, como el componente base o padre.
Por ejemplo, en lugar de manejar directamente un estado del carrito en el componente del producto, debe gestionarse en el componente global que controla el carrito de compras.
props
en el contexto correcto puede causar errores.Finalmente, una vez que hemos dominado el arte de emitir eventos usando Composition API, podemos ampliar las funcionalidades de nuestra aplicación integrando observadores personalizados. Esto nos permitirá reaccionar dinámicamente a cambios en el estado o en la entrada del usuario, creando aplicaciones Vue.js más interactivas e intuitivas.
Recuerda, el uso adecuado del Composition API no solo mejora la organización y legibilidad del código, sino que también involucra una mayor comprensión sobre cómo Vue.js gestiona los estados y eventos dentro de la arquitectura de tu aplicación. Sigue experimentando con estos conceptos para llevar tus habilidades de desarrollo en Vue.js al próximo nivel.
Aportes 3
Preguntas 0
¿En qué casos se utiliza más la forma de codificar en Options y en cuáles la de Compositions?
Para Vue3 ya no es necesario pasar el argumento $event en la función al recibir el evento en el componente, de hecho solo es necesario pasar el nombre de la función sin los parentesis (ej. addcart). Vue detecta si el emit está pasando parámetros y se los envia a la función que recibe el evento como argumentos de esa función.
Reitero lo que otros compañeros ya han manifestado anteriormente, y es que se hace muy complicado (para monitores promedio), la resolucion, o zoom, con el que fue editado este video.
Esto realmente genera mucho malestar para el que esta siguiendo el curso, ya que tenes abierto el editor de código, a la vez que el video del curso.
Se hace muy dificil la verdad, sería sensato que arreglen este tema.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?