Skip to main content
título editado
Origen Enlace
Pablo Lozano
  • 49.9k
  • 8
  • 55
  • 92

Envair Enviar evento de componente padre a hijo Vuejs

En el componente padre tengo una imagen con un evento @click="openLightbox"@click="openLightbox" el cual me gustaría que cada vez que hago click en la imagen, mande el srcsrc de la imagen al componente hijo, y que el hijo abra un lightbox con la imágenimagen 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ágenimagen 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>

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

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>

Enviar evento de componente padre a hijo

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>
Origen Enlace

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>