Teleports

Teleports

Componente que nos proporciona vue, que me permite inyectar secciones de componentes (templates) en otros elementos del DOM como el body. sintaxis <teleport> este debe envolver la seccion que quiero inyectar en algun elemento del DOM.

Archivo App.vue

<template>
  <Modal />
</template>

<script>
import Modal from "./components/Modal.vue";
export default {
  name: "App",
  components: { Modal },
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
</style>

++Archivo Modal.vue ++

<template>
  <div>
    <button @click="toggle">Modal</button>
    <teleport to="body">
      <div v-show="show" class="modal">
        <h2>Titulo</h2>
        <p>Esto es solo simple texto en un parrafo</p>
        <button @click="toggle">cerrar</button>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>

Excelente el curso, me gusta la profesora , se nota que conoce el tema perfectamente. Sería genial un proyecto con vue3 y vuex que sea dictado por la profe.

Dejo mi ejercicio

Para los que les sale el error en Modal.vue , lo pueden renombrar por ejemplo con ModalNew.vue

Vue tiene un montón de cosas que desconocía 🤔 qué genial está jaja

Este tema si parece misterioso, porque en teoría Vue solo tiene acceso, a todo aquello que está dentro de la etiqueta donde se montó todo, y el body está fuera, pues body contiene al div, con el ID app, como es posible que Vue puede reconocer lo que está afuera de él, por el momento no daré muchas vueltas a eso, pero esto cuanto menos es curioso

Puede llegar a ser de utilidad!

Muy interesante, no conocia esto de teleport, le puede dar una mejor visualización a mi script

Estoy aprendiendo Vue. Vengo de React con unos 3 años de exp. En React personalmente he usado los Portals (Vue Teleports) para desplegar modals como comenta la profesora.

LO que siempre necesite y nunca investigue… GRACIASSS

Buena clase!

Muy útil

<template>
  <div>
    <button @click="toggle">Modal</button>
    <teleport to="body">
      <div v-show="show" class="modal">
        <div class="modal__body">
          <h1>Titulo</h1>
          <p>Lorem ipsum dolor sit amet, consectet</p>
          <button @click="toggle">Cerrar</button>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script>
export default {
  data: () => ({
    show: false,
  }),
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>

<style>
.modal {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.205);
}

.modal__body {
  width: 50%;
  min-height: 200px;
  background-color: white;
  text-align: center;
  border-radius: 10px;
}
</style>

Me parece que el error se produce cuando se hace el comando de npm run lint, que por lo que vi hay que recargar nuevamente la pagina después de usar ese comando! me paso lo mismo 😛