El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Comunicación entre Componentes

Siguiente ►
►

En Vue.js, la comunicación entre componentes es fundamental para construir aplicaciones complejas y bien estructuradas. En este tema, aprenderemos las diferentes formas de comunicación entre componentes, incluyendo el uso de props, eventos personalizados, y el patrón de proveedor/consumidor.

Contenido

  1. Comunicación de Padre a Hijo con Props
  2. Comunicación de Hijo a Padre con Eventos Personalizados
  3. Comunicación entre Componentes Hermanos
  4. Patrón de Proveedor/Consumidor
  5. Ejercicios Prácticos

  1. Comunicación de Padre a Hijo con Props

¿Qué son las Props?

Las props (propiedades) son una forma de pasar datos desde un componente padre a un componente hijo. Las props se definen en el componente hijo y se pasan desde el componente padre.

Ejemplo Práctico

Componente Padre (ParentComponent.vue):

<template>
  <div>
    <h1>Componente Padre</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hola desde el componente padre'
    };
  }
};
</script>

Componente Hijo (ChildComponent.vue):

<template>
  <div>
    <h2>Componente Hijo</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Explicación

  • En el componente padre, definimos un dato parentMessage y lo pasamos al componente hijo usando la sintaxis :message="parentMessage".
  • En el componente hijo, definimos una prop llamada message que espera un valor de tipo String.

  1. Comunicación de Hijo a Padre con Eventos Personalizados

¿Qué son los Eventos Personalizados?

Los eventos personalizados permiten que un componente hijo envíe datos de vuelta al componente padre. Esto se logra emitiendo eventos desde el hijo y escuchándolos en el padre.

Ejemplo Práctico

Componente Padre (ParentComponent.vue):

<template>
  <div>
    <h1>Componente Padre</h1>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

Componente Hijo (ChildComponent.vue):

<template>
  <div>
    <h2>Componente Hijo</h2>
    <button @click="sendMessage">Enviar Mensaje al Padre</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childEvent', 'Hola desde el componente hijo');
    }
  }
};
</script>

Explicación

  • En el componente hijo, emitimos un evento personalizado childEvent con un mensaje.
  • En el componente padre, escuchamos el evento @childEvent y manejamos el mensaje recibido en el método handleChildEvent.

  1. Comunicación entre Componentes Hermanos

Uso de un Bus de Eventos

Para comunicar componentes hermanos, podemos usar un bus de eventos, que es una instancia de Vue que actúa como un intermediario.

Ejemplo Práctico

Bus de Eventos (eventBus.js):

import Vue from 'vue';
export const EventBus = new Vue();

Componente Hermano 1 (SiblingOne.vue):

<template>
  <div>
    <h2>Hermano 1</h2>
    <button @click="sendMessage">Enviar Mensaje al Hermano 2</button>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageFromSiblingOne', 'Hola desde Hermano 1');
    }
  }
};
</script>

Componente Hermano 2 (SiblingTwo.vue):

<template>
  <div>
    <h2>Hermano 2</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('messageFromSiblingOne', (msg) => {
      this.message = msg;
    });
  }
};
</script>

Explicación

  • Creamos un bus de eventos (eventBus.js) que es una instancia de Vue.
  • En SiblingOne.vue, emitimos un evento messageFromSiblingOne usando el bus de eventos.
  • En SiblingTwo.vue, escuchamos el evento messageFromSiblingOne y actualizamos el mensaje.

  1. Patrón de Proveedor/Consumidor

Uso de Provide/Inject

Vue.js proporciona el patrón provide/inject para compartir datos entre componentes ancestros y descendientes sin necesidad de pasar props a través de cada nivel intermedio.

Ejemplo Práctico

Componente Proveedor (ProviderComponent.vue):

<template>
  <div>
    <h1>Componente Proveedor</h1>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      sharedData: 'Datos compartidos desde el proveedor'
    };
  }
};
</script>

Componente Consumidor (ChildComponent.vue):

<template>
  <div>
    <h2>Componente Consumidor</h2>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</script>

Explicación

  • En el componente proveedor, usamos provide para compartir datos.
  • En el componente consumidor, usamos inject para recibir los datos compartidos.

  1. Ejercicios Prácticos

Ejercicio 1: Comunicación de Padre a Hijo

Crea un componente padre que pase un mensaje a un componente hijo usando props. El componente hijo debe mostrar el mensaje recibido.

Ejercicio 2: Comunicación de Hijo a Padre

Crea un componente hijo que emita un evento personalizado con un mensaje. El componente padre debe escuchar el evento y mostrar el mensaje recibido.

Ejercicio 3: Comunicación entre Componentes Hermanos

Crea dos componentes hermanos que se comuniquen usando un bus de eventos. Un componente debe enviar un mensaje y el otro debe recibirlo y mostrarlo.

Ejercicio 4: Uso de Provide/Inject

Crea un componente proveedor que comparta datos usando provide. Crea un componente hijo que reciba y muestre los datos usando inject.

Soluciones

Solución Ejercicio 1

Componente Padre:

<template>
  <div>
    <ParentComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Mensaje del Padre'
    };
  }
};
</script>

Componente Hijo:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

Solución Ejercicio 2

Componente Padre:

<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleChildEvent(message) {
      this.childMessage = message;
    }
  }
};
</script>

Componente Hijo:

<template>
  <div>
    <button @click="sendMessage">Enviar Mensaje</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('childEvent', 'Mensaje del Hijo');
    }
  }
};
</script>

Solución Ejercicio 3

Bus de Eventos:

import Vue from 'vue';
export const EventBus = new Vue();

Componente Hermano 1:

<template>
  <div>
    <button @click="sendMessage">Enviar Mensaje</button>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('messageFromSiblingOne', 'Mensaje del Hermano 1');
    }
  }
};
</script>

Componente Hermano 2:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './eventBus';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('messageFromSiblingOne', (msg) => {
      this.message = msg;
    });
  }
};
</script>

Solución Ejercicio 4

Componente Proveedor:

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      sharedData: 'Datos compartidos'
    };
  }
};
</script>

Componente Consumidor:

<template>
  <div>
    <p>{{ sharedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['sharedData']
};
</script>

Conclusión

En esta sección, hemos aprendido varias técnicas para la comunicación entre componentes en Vue.js, incluyendo el uso de props, eventos personalizados, buses de eventos y el patrón de proveedor/consumidor. Estas técnicas son esenciales para construir aplicaciones Vue.js escalables y bien organizadas. Asegúrate de practicar los ejercicios para consolidar tu comprensión de estos conceptos.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados