Vue 3: Conhecendo mais de perto

Vue 3: Conhecendo mais de perto | Alura Cursos Online


<script>
export default {
  name: "Modal",
  emits: ["fechar"],
  methods: {
    fechar() {
      this.$emit("fechar");
    },
    observarTeclado(evento) {
      if (evento.key === "Escape") {
        this.fechar()
      }
      return;
    },
  },
  mounted() {
    window.addEventListener("keydown", this.observarTeclado);
  },
  unmounted() {
    window.removeEventListener("keydown", this.observarTeclado);
  },
};
</script>

<script>
import { onMounted, onUnmounted } from "vue";
export default {
  name: "Modal",
  setup(props, context) {
    const fechar = () => {
      context.emit("fechar");
    };
    const observarTeclado = (evento) => {
      if (evento.key === "Escape") {
        fechar();
      }
      return;
    };
    onMounted(() => {
      window.addEventListener("keydown", observarTeclado);
    });
    onUnmounted(() => {
      window.removeEventListener("keydown", observarTeclado);
    });
    return {
      fechar
    };
  },
};
</script>

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Vue 3: Conhecendo mais de perto

Vinicios Neves

Explore por tópico

Composition API

Vue Fragments

Teleport

Vinicios Neves

Inscreva-se em nossa Newsletter

Explore por tópico

Leia também

Composition API

Vue Fragments

Teleport