Introducción: fundamentos de Vue.js

1

Programación Reactiva con Vue.js 3

2

Programación Reactiva con Vue.js: Fundamentos y Prácticas

3

Vue y Progresividad: Frameworks y Capas Esenciales

4

Renderización Declarativa con JavaScript: Manera Fácil

5

Capa declarativa de Vue: Conectando datos y presentación

Reactividad a profundidad

6

Sistemas Reactivos: Paradigmas y Ejemplos Prácticos

7

Proxies en JavaScript: Control y Seguridad de Datos

8

Creación de Framework JavaScript con Reactividad Básica

9

Proxies en JavaScript: Trampas y Reactividad

10

Uso de Reflect y Trampas en JavaScript Avanzado

11

Programación Reactiva: Efectos, Tracks y Triggers en JavaScript

12

Creación de un Mini Framework Reactivo con Trackers y Triggers

Templates de Vue.js

13

Buenas prácticas en Templates de HTML con Vue.js

14

Desarrolla una Tienda eCommerce Interactiva con Vue.js

15

Expresiones

16

Atributos Dinámicos en Vue.js: Clases y Estilos Reactivos

17

Rendering condicional en Vue.js: uso de v-show y v-if

18

Renderizado de Listas con VueJS: Directivas y Estilos Dinámicos

19

Eventos en Vue JS: Dinamismo y Funcionalidad en HTML

APIs internas de Vue.js

20

Options API vs. Composition API

21

Diferencias clave entre Options API y Composition API de Vue.js

22

Métodos en Vue JS: Crear y Validar Descuentos en Options API

23

Creación de Métodos en Composition API de Vue.js

24

Uso de Reactive en Vue Composition API

Segunda capa: componentes de Vue.js

25

Creación de Componentes Personalizados en Vue.js

26

Conexión de Props en Vue: Composition vs Options API

27

Crear Componentes Personalizados en Vue.js

28

Eventos Personalizados en Vue desde Componentes Hijos a Padres

29

Eventos Personalizados con Composition API en Vue.js

30

Watchers en Vue para Componentes Reactivos

31

Creación de Watchers Personalizados en Vue Composition API

32

Propiedades Computadas en Vue: Simplifica la Reactividad

33

Propiedades Computadas en Composition API de Vue.js

34

Ciclos de Vida en Vue: Gestiona Componentes con Options y Composition API

35

Ciclos de Vida en Vue.js: Composition API vs Options API

Siguientes pasos

36

Curso práctico de reactividad en Vue.js 3

37

Reactividad en Vue: Efectos, Ciclos y Computadas

No tienes acceso a esta clase

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

Eventos Personalizados con Composition API en Vue.js

29/37
Recursos

¿Cómo crear eventos personalizados con el Composition API de Vue.js?

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.

¿Cuál es el problema que debemos resolver?

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.

¿Cómo definir el evento en el componente hijo?

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.

¿Cómo utilizar el evento en el componente padre?

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
  };
}

¿Qué hacer si los estados no están disponibles?

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.

¿Qué errores pueden ocurrir y cómo solucionarlos?

  • Props no definida: Asegúrate de que las propiedades se están pasando y utilizando correctamente. La falta de definición de props en el contexto correcto puede causar errores.
  • Problemas de caché: Al realizar cambios significativos en la lógica de manejo de eventos, refresca la caché del navegador para asegurarte de que estás trabajando con el código actualizado.

Crear dinamismo con observadores personalizados

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

Ordenar por:

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

¿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.

Ver aqui la documentación de Vue al respecto

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.