Componentes Básicos com Composition API e TypeScript

Introdução aos Componentes

Em Vue, um componente é uma instância reutilizável com opções predefinidas. Na Composition API, que é uma adição mais recente e funcional ao Vue, componentes são definidos de maneira mais flexível e modular. Usando TypeScript, você ganha em robustez e previsibilidade no desenvolvimento, ajudando a definir claramente as propriedades e os tipos esperados, o que facilita a manutenção e escala do código.

Estrutura de um Componente com Composition API e TypeScript

Um componente típico utilizando Composition API e TypeScript pode ser estruturado da seguinte forma:

<script setup lang="ts">
import { ref } from "vue";

const nome = ref<string>("LG lugar de gente");
const contador = ref<number>(0);

function incrementar() {
  contador.value++;
}
</script>

<template>
  <div>
    <h1>{{ nome }}</h1>
    <button @click="incrementar">Clique</button>
    <p>{{ contador }}</p>
  </div>
</template>

Comunicação Entre Componentes: Props e Events

Props

Props são personalizações que você passa para o componente, permitindo que você inicialize um componente com valores predefinidos ou dinâmicos. Com TypeScript, você pode definir tipos para suas props, garantindo que o componente receba dados adequados.

Exemplo de definição e utilização de props:

<script setup lang="ts">
defineProps<{
  mensagem: string;
}>();
</script>

<template>
  <div>{{ $props.mensagem }}</div>
</template>

Events

Eventos são a forma do componente filho comunicar-se com seu componente pai. Eles são usados para enviar informações para fora do componente quando algo acontece, como um clique de botão ou a conclusão de uma ação.

Exemplo de emissão de evento em um componente filho:

<script setup lang="ts">
import { ref } from "vue";

const emit = defineEmits<{
  (e: "meu-evento", msg: string): void;
}>();

function enviarEvento() {
  emit("meu-evento", "dados enviados");
}
</script>

<template>
  <button @click="enviarEvento">Enviar</button>
</template>

E no componente pai, você captura esse evento assim:

<script setup lang="ts">
import ComponenteFilho from "./ComponenteFilho.vue";

function tratarEvento(msg: string) {
  console.log("Evento recebido com:", msg);
}
</script>

<template>
  <ComponenteFilho @meu-evento="tratarEvento" />
</template>

Utilizar a Composition API com TypeScript não apenas organiza e simplifica o código dos componentes no Vue, mas também oferece um controle de tipo superior, tornando o desenvolvimento mais previsível e seguro.