El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos sobre dos conceptos fundamentales en Vue.js: las props y los eventos personalizados. Estos conceptos son esenciales para la comunicación entre componentes y para construir aplicaciones Vue.js modulares y reutilizables.

¿Qué son las Props?

Las props (abreviatura de "properties") son una forma de pasar datos de un componente padre a un componente hijo. Las props permiten que los componentes sean más reutilizables y modulares, ya que pueden recibir diferentes datos según el contexto en el que se utilicen.

Definiendo Props en un Componente

Para definir props en un componente hijo, utilizamos la opción props en la definición del componente. Aquí hay un ejemplo básico:

// Componente Hijo (ChildComponent.vue)
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

En este ejemplo, el componente ChildComponent define una prop llamada message que es de tipo String y es requerida.

Pasando Props desde el Componente Padre

Para pasar una prop desde un componente padre a un componente hijo, simplemente utilizamos la sintaxis de atributos en el template del componente padre:

// Componente Padre (ParentComponent.vue)
<template>
  <div>
    <ChildComponent message="Hola desde el componente padre!" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

En este ejemplo, el componente ParentComponent pasa la cadena "Hola desde el componente padre!" como valor de la prop message al ChildComponent.

Eventos Personalizados

Los eventos personalizados permiten que un componente hijo se comunique con su componente padre. Esto es útil cuando el componente hijo necesita notificar al componente padre sobre algún cambio o acción.

Emisión de Eventos Personalizados

Para emitir un evento personalizado desde un componente hijo, utilizamos el método $emit. Aquí hay un ejemplo:

// Componente Hijo (ChildComponent.vue)
<template>
  <div>
    <button @click="notifyParent">Notificar al Padre</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    notifyParent() {
      this.$emit('custom-event', 'Datos desde el hijo');
    }
  }
}
</script>

En este ejemplo, el componente ChildComponent emite un evento personalizado llamado custom-event con un mensaje como dato cuando se hace clic en el botón.

Escuchando Eventos Personalizados en el Componente Padre

Para escuchar un evento personalizado en el componente padre, utilizamos la directiva v-on (o su atajo @):

// Componente Padre (ParentComponent.vue)
<template>
  <div>
    <ChildComponent @custom-event="handleCustomEvent" />
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Evento personalizado recibido:', data);
    }
  }
}
</script>

En este ejemplo, el componente ParentComponent escucha el evento custom-event emitido por ChildComponent y ejecuta el método handleCustomEvent cuando el evento es recibido.

Ejercicio Práctico

Ejercicio 1: Comunicación entre Componentes

Crea un componente hijo llamado CounterComponent que tenga un botón para incrementar un contador y emita el valor del contador al componente padre.
Crea un componente padre llamado App que incluya CounterComponent y muestre el valor del contador recibido del componente hijo.

Solución

CounterComponent.vue

<template>
  <div>
    <button @click="incrementCounter">Incrementar Contador</button>
  </div>
</template>

<script>
export default {
  name: 'CounterComponent',
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
      this.$emit('counter-updated', this.counter);
    }
  }
}
</script>

App.vue

<template>
  <div>
    <h1>Valor del Contador: {{ counterValue }}</h1>
    <CounterComponent @counter-updated="updateCounterValue" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    CounterComponent
  },
  data() {
    return {
      counterValue: 0
    };
  },
  methods: {
    updateCounterValue(newValue) {
      this.counterValue = newValue;
    }
  }
}
</script>

Resumen

En esta lección, hemos aprendido sobre las props y los eventos personalizados en Vue.js. Las props nos permiten pasar datos de un componente padre a un componente hijo, mientras que los eventos personalizados permiten que un componente hijo se comunique con su componente padre. Estos conceptos son fundamentales para construir aplicaciones Vue.js modulares y reutilizables. En la próxima lección, exploraremos los slots, que nos permiten crear componentes más flexibles y personalizables.

Props y Eventos Personalizados

¿Qué son las Props?

Definiendo Props en un Componente

Pasando Props desde el Componente Padre

Eventos Personalizados

Emisión de Eventos Personalizados

Escuchando Eventos Personalizados en el Componente Padre

Ejercicio Práctico

Ejercicio 1: Comunicación entre Componentes

Solución

Resumen

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