1

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 imagen 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 imagen 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>

Componente 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>

1 respuesta 1

1

Según tu código no hay ningún método "openLightbox", de dónde es que lo estás llamando en el padre?

para mandar propiedades desde el padre al hijo:

Componente padre:

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

<script>
import Lightbox from "@/components/Lightbox.vue";
export default {
  components: {
    Lightbox
  },
  data(){ 
    return {
      abrir : ''
    }
  }
}
</script>

Componente 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="abrir"
      alt="Piscina"
    />
  </div>
</template>

<script>
export default {
  props: ['abrir'],
  mounted(){
   console.log('src que envío desde el padre', this.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>
1
  • Muchas gracias por tu comentario, ya lo he solucionado, copiando y pegando tu código, solo he tenido que cambiar el lifecycle hook del componente hijo, en vez de mounted() he usado updated() para que cada vez que se cambie la propiedad del componente hijo se llame a la función openLightbox.
    – Romera02
    Commented el 15 sept. 2022 a las 9:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.