Skip to main content
1 de 2

Envair evento de componente padre a hijo Vuejs

En el componente padre tengo una imagen con un evento @click="openLightbox" el cual me gustaría que cada vez que hago click en la imagen, mande el src de la imagen al componente hijo, y que el hijo abra un lightbox con la imágen que le ha mandado el padre. Es decir que cada vez que se haga click en una imagen que contiene el componente padre, el componente hijo llame a una función para abrrir un lightbox con la imágen que le ha enviado el padre.

Componente padre:

<template>
  <img
    @click="openLightbox"
    id="imagen-13"
    src="../assets/galeria-13.jpg"
    />
  <Lightbox :abrir="openLightbox" />
</template>

<script>
import Lightbox from "@/components/Lightbox.vue";
export default {
  components: {
    Lightbox
  }
}
</script>

Componete hijo:

<template>
  <div class="lightbox inactivo" id="lightbox">
    <div class="cerrar">
      <button @click="cerrar"><i class="fa-solid fa-xmark"></i></button>
    </div>

    <img
      id="imagenLightbox"
      class="grande"
      src=""
      alt="Piscina"
    />
  </div>
</template>

<script>
export default {
  props: ['abrir'],
  methods: {
    openLightbox() {
      console.log("llego");
      let nav = document.getElementById("nav");
      nav.setAttribute("style", "display: none");
      let lightbox = document.getElementById("lightbox");
      let imagen = document.getElementById("imagenLightbox");
      let src = e.target.src;

      lightbox.classList.remove("inactivo");
      imagen.setAttribute("src", src);
    },
    cerrar() {
      let lightbox = document.getElementById("lightbox");
      let imagen = document.getElementById("imagenLightbox");

      nav.setAttribute("style", "");
      lightbox.classList.add("inactivo");
      imagen.setAttribute("src", "");
    }
  }
};
</script>