Props e eventos de componentes
Passe dados para baixo com defineProps, emita eventos para cima com defineEmits e valide props com restrições de tipo e obrigatoriedade.
Props e eventos de componentes é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Propriedades no Vue 3
As propriedades passam dados do componente pai para o filho. Em <script setup>, utilize defineProps() para declará-las. As propriedades são somente leitura no filho — nunca as altere diretamente.
<script setup lang="ts">
const props = defineProps<{
title: string;
count?: number;
variant?: 'primary' | 'secondary';
}>();
</script>
<template>
<h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>withDefaults para valores padrão de propriedades
Envolva defineProps() com withDefaults() para fornecer valores padrão.
<script setup lang="ts">
const props = withDefaults(defineProps<{
count?: number;
variant?: 'primary' | 'secondary';
}>(), {
count: 0,
variant: 'primary'
});
</script>Passando propriedades no template
Passe valores estáticos como atributos simples. Passe valores dinâmicos com v-bind (:). Passe atributos booleanos apenas pela presença, sem valor.
<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />Emissão de eventos — comunicação do filho com o pai
Os componentes filhos se comunicam com os pais emitindo eventos. Utilize defineEmits() para declarar quais eventos o componente pode emitir e, em seguida, chame a função emit retornada.
<script setup lang="ts">
const emit = defineEmits<{
update: [value: string];
close: [];
submit: [data: FormData];
}>();
function handleSubmit(data: FormData) {
emit('submit', data); // fire the event
}
</script>Ouvindo emissões no componente pai
Utilize @eventName no template para ouvir eventos personalizados dos componentes filhos.
<SearchInput
@update="searchTerm = $event"
@submit="handleSearch"
/>v-model com componentes personalizados
v-model em um componente personalizado é uma forma abreviada de :modelValue + @update:modelValue. O componente deve aceitar a propriedade e emitir o evento de atualização.
<!-- Parent: -->
<MyInput v-model="email" />
<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>
<template>
<input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>Várias vinculações v-model
O Vue 3 oferece suporte a vários v-model em um componente, com modificadores nomeados.
<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />Validação de propriedades
Na API de opções ou na declaração de propriedades em tempo de execução, adicione restrições de tipo, obrigatoriedade e validador. A função defineProps() baseada em TypeScript fornece isso em tempo de compilação.
Propriedade versus dados — fluxo unidirecional
O Vue impõe um fluxo de dados unidirecional: as propriedades fluem do pai para o filho; os eventos fluem do filho para o pai. Se um filho precisar modificar dados, ele emitirá um evento e o pai tratará da atualização.
Slots como alternativa às propriedades
Para conteúdo que deve ser HTML ou composto por componentes, e não apenas dados, utilize slots. O pai fornece o conteúdo dentro das tags do componente; o filho o renderiza com <slot />.
<!-- Parent: -->
<Card title="Hello">
<p>This content goes in the default slot.</p>
</Card>
<!-- Card.vue: -->
<template>
<div class="card">
<h2>{{ title }}</h2>
<slot /> <!-- renders the p tag -->
</div>
</template>Verificação rápida
Como um componente filho do Vue comunica um evento de volta ao componente pai?
Recapitulação: propriedades e emissões
defineProps para declarações de propriedades tipadas. withDefaults para valores padrão. As propriedades são somente leitura nos componentes filhos. defineEmits para declarar e tipar eventos emitidos. @eventName no pai para ouvir eventos. v-model = :modelValue + @update:modelValue. Fluxo de dados unidirecional: propriedades descem, eventos sobem. Slots para passar conteúdo ou fragmentos de template.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Props e eventos de componentes” é grátis?
Sim — o texto completo de “Props e eventos de componentes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Props e eventos de componentes”?
Passe dados para baixo com defineProps, emita eventos para cima com defineEmits e valide props com restrições de tipo e obrigatoriedade. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Props e eventos de componentes”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Vue SFC: script template style
- API de opções: data methods computed
- Diretivas: v-if v-for v-bind v-on
- Props e eventos de componentes