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>