Os componentes são o coração do Vue. Em vez de escrever uma página enorme, dividimos a interface em peças menores e reutilizáveis, como um cabeçalho, um card ou um botão. Nesta página vamos criar e usar componentes e aprender a enviar dados para eles com props.

Criar e usar um componente

Crie o arquivo components/Greeting.vue:

<template>
    <p class="greeting">Bem-vindo a Elmore!</p>
</template>

<style scoped>
.greeting {
    font-weight: 700;
}
</style>

Agora vamos usá-lo em outro arquivo. No Vue puro, é preciso importar o componente:

<script setup>
import Greeting from './components/Greeting.vue';
</script>

<template>
    <Greeting />
    <Greeting />
</template>

O componente escrito duas vezes aparece duas vezes na tela. É aí que está a reutilização: escrevemos uma vez e usamos quantas vezes quisermos.

<aside> 💡 No Nuxt, todo arquivo dentro da pasta components/ é importado automaticamente, então basta escrever <Greeting />. Os nomes de componentes usam PascalCase (CharacterCard), para diferenciá-los das tags HTML.

</aside>

Props: passando dados para o componente

As props são os "parâmetros" do componente: o pai decide o que mostrar, e o filho decide como mostrar. Crie o componente CharacterCard.vue:

<script setup>
const props = defineProps({
    name: String,
    age: Number,
    isMain: Boolean,
});
</script>

<template>
    <article>
        <h3>{{ name }}</h3>
        <p>{{ age }} anos</p>
        <span v-if="isMain">Principal</span>
    </article>
</template>

O defineProps declara quais props o componente recebe e qual é o tipo de cada uma. Agora, para usar:

<CharacterCard name="Gumball" :age="12" is-main />
<CharacterCard name="Darwin" :age="10" />

Um mesmo componente, dados diferentes, cards diferentes.

Com : e sem :, a parte que mais confunde

Essa é a parte que mais gera dúvida, então vale olhar com calma. Repare que, no exemplo acima, name foi escrito sem : e age foi escrito com :. Veja o que o componente recebe em cada caso: