Introducción

1

Desarrollo de Aplicaciones Profesionales con VueJS

2

VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

CLI y Dev Tools

3

Herramientas esenciales para desarrollar con BioJS y NodeJS

4

Creación de una Aplicación Vue.js con CLI y Webpack Simple

5

Configuración y uso de Webpack en proyectos JavaScript

6

Configuración y uso de Babel para compatibilidad JavaScript

7

Configuración de eSlimt con EstándarJS y Webpack

8

Integración de SaaS y Bulma en Aplicaciones Vue.js

9

Configuración de Pag para optimizar el workflow de desarrollo HTML

10

Diseño de Mockups: Práctica y Colaboración en Comunidad

11

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

12

Expresiones en Vue: Manipulación Dinámica del DOM

13

Directivas de Vue: Uso y Funciones Principales

14

Data Binding y Directivas en Vue: bmodel y bevined

15

Propiedades Computadas en JavaScript: Creación y Uso Práctico

16

Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades

17

Manipulación de Eventos y Métodos en Aplicaciones Web

18

Creación de Interfaz con Vue.js y Framework CSS Bulma

19

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

20

Integración de Servicios HTTP con JavaScript y API Fetch

21

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

22

Integración de Servicios en Vue.js: Uso de API y Mejora de Código

Sistema de Componentes

23

Creación y Registro de Componentes en Vue.js

24

Creación de Componentes en Vue.js con Bulma para Platzi Music

25

Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

26

Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código

27

Comunicación entre Componentes en Vue.js: Props y Eventos

28

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

29

Uso de Slots para Inyección Dinámica de HTML en Componentes Vue

30

Comunicación entre Componentes Vue con Event Bus y Plugins

Vue Router

31

Vue Router: Creación de Single Page Applications

32

Instalación y Configuración de Vue Router en Aplicaciones Vue.js

33

Navegación de Rutas con Vue Router en Aplicaciones SPA

Extendiendo VueJS

34

Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos

35

Filtros en Vue: Formateo de Duraciones de Canciones en Componentes

36

Creación de Directivas Personalizadas en Vue.js

37

Reutilización de Funcionalidad con Mixins en VueJS

Clases, Animaciones y Transiciones36

38

Integración de Animaciones CSS3 en Aplicaciones VueJS

Vuex

39

Gestión de Estados Centralizados con la Librería BuX

40

Integración de VueX y arquitectura Flux en Vue.js

41

Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo

42

Uso de Getters en Vuex para Acceso Personalizado de Estado

43

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

44

Integración de VueX y Babel en PlatziMusic

Nuxt.js

45

Renderizado del Lado del Servidor con Vue.js y Nuxt

46

Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

47

Integración de VueJS con Nuxt para Server-Side Rendering

Deploy a Producción con Now

48

Despliegue de Aplicaciones con NOW en BIOS JS

49

Despliegue de Aplicaciones Node.js con NOW y Webpack

Conclusiones

50

Construcción de Aplicaciones Profesionales con Vue.js

Bonus

51

Internacionalización de Aplicaciones con Vue I18n

52

Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

53

Autenticación en Vue.js con JSON Web Tokens (JWT)

No tienes acceso a esta clase

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

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

28/53
Recursos

¿Cómo enviar información desde un componente hijo hacia un componente padre en Vue.js?

Al trabajar con Vue.js, la comunicación entre componentes puede ser crucial para el funcionamiento de tu aplicación. Mientras que pasar datos desde un componente padre a un hijo se logra usando propiedades (props), el camino inverso —de un hijo a un padre— se realiza mediante eventos. Aquí te guiamos sobre cómo establecer esta comunicación.

¿Cómo emitir eventos desde un componente hijo?

Emitir un evento desde un componente hijo permite que el componente padre "escuche" y reaccione a acciones específicas iniciadas por el hijo. Aquí te mostramos cómo lograrlo:

  1. Agregar directiva v-on: Empezamos por adjuntar un evento a un elemento, como un botón dentro del componente hijo. Esto se puede hacer con la directiva v-on o usando el atajo @. Por ejemplo:

    <button @click="selectTrack">Play</button>
    
  2. Crear el método para manejar el evento: En el objeto methods del componente, definimos la función que llamaremos con el evento:

    methods: {
      selectTrack() {
        this.$emit('select', this.trackId);
      }
    }
    
  3. Usar $emit para emitir un evento: Utilizamos el método $emit() para enviar el evento al componente padre. El primer argumento de $emit es el nombre del evento y el segundo es la información que deseamos pasar, en este caso trackId.

¿Cómo escucha el componente padre el evento emitido por el hijo?

Una vez que el hijo emite el evento, el componente padre debe estar listo para capturarlo y responder adecuadamente. Aquí te explicamos cómo hacerlo:

  1. Usar la directiva v-on para escuchar eventos: Dentro del componente padre, escuchamos el evento utilizando la directiva v-on:

    <Track @select="setSelectedTrack" />
    
  2. Definir el método correspondiente en el padre: En el objeto methods del componente padre, creamos una función para manejar el evento recibido:

    methods: {
      setSelectedTrack(id) {
        this.selectedTrack = id;
      }
    }
    
  3. Actualizar el estado del componente padre: Dentro del método, actualizamos el estado o realizamos acciones basadas en la información obtenida del evento.

¿Cómo mejorar el código con Vue.js y estilos CSS?

La reactividad y el manejo de estilos son elementos esenciales en las aplicaciones Vue.js. Aquí te ofrecemos algunos consejos para mejorar la interacción y presentación de tus componentes:

  • Destacar elementos seleccionados: Utiliza clases CSS para resaltar el componente seleccionado. Por ejemplo, puedes aplicar una clase isActive usando v-bind:

    <template>
      <div :class="{ isActive: t.id === selectedTrack }" v-for="t in tracks">
        <!-- contenido -->
      </div>
    </template>
    
  • Usar scoped en estilos CSS: Para evitar que los estilos CSS afecten globalmente, utiliza el atributo scoped en tus etiquetas <style>:

    <style scoped>
      .content {
        min-height: 40px;
      }
    </style>
    

¿Por qué es importante la comunicación padre-hijo y viceversa?

La comunicación entre componentes de un proyecto Vue.js es esencial para mantener la inmutabilidad y reactividad de los props. Las props no deben modificarse directamente en el hijo. Por lo tanto, siempre que sea necesario actualizar algo que influya en el padre, el hijo debe notificar a través de eventos. Este modelo de comunicación asegura una aplicación Vue.js estructurada, eficiente y fácil de mantener.

Aportes 16

Preguntas 4

Ordenar por:

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

En resumen, la comunicación de padres con hijos es a través de propiedades y de hijos con padres es a través de eventos.

Y la propiedad scoped de css nos permite aplicar los estilos solo a ese componente

¡El sistema de componentes es genial!

Asi vamos

 methods: {
  selecTrack() {
   this.$emit('select', this.track.id )
  }
}

Componente padre
html
@select="setSelectedTrack"

js
methods {
 setSelectedTrack(id){
   this.selectedTrack = id
 }
}

Como te le puedo dar me gusta a este video?, es genial…

De los mejores profesores !
Explica muy bien!!!!, Saludos al Profesor!!!

También se puede usar

this.$parent.nombreDeMiFuncion()

¿pero cual es la forma correcta?
¿Cuando es recomendable usar uno u otro?

Saludos.
Checando los datos que retorna el API, observo una property llamada uri que me manda a spotify.
Hay manera que mediante esta property me haga del sonido y reproducirlo en mi App

Ty de nuevo jeje

No entendí lo que hizo en 07:54 alguien podría explicarme un poco mejor?
Saludos!

un componente hijo se comunica con un componente por medio de emitir un evento con metodo $emit()

Hola que tal no entendi algo
cuando hago un metodo con el evento click

tambien save reconocer el this (track)
no entendi esa parte gracias

A diferencia de los props que es la comunicacion entre Padre e Hijo, para la comunicacion de Hijo a padre es atraves de eventos Vue contiene evento personalizados que es $emit la cual permite que el hijo interatuo con el padre a travez de evento.

👌

.