0Pricing
Vue Academy · Aula

defineProps e defineEmits

Props tipadas com defineProps (), defineEmits () e withDefaults() para valores padrão.

defineProps e defineEmits é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 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 Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Comunicação entre componentes

Os componentes recebem dados por meio de props e enviam mensagens para cima por meio de eventos. Em <script setup>, você declara esses elementos com as macros defineProps e defineEmits.

defineProps em tempo de execução

Você pode declarar props com um objeto em tempo de execução, assim como na API de opções. Isso funciona tanto em JS quanto em TS.

<script setup>
const props = defineProps({
  title: String,
  count: Number
})
console.log(props.title)
</script>

defineProps com um tipo genérico do TypeScript

No TypeScript, passe um tipo por meio do genérico para obter props mais limpas e verificadas quanto aos tipos. O compilador transforma o tipo em declarações para o tempo de execução.

<script setup lang="ts">
const props = defineProps<{
  title: string
  count: number
}>()
</script>

Props opcionais com ?

Adicione um ponto de interrogação a uma propriedade do tipo para torná-la opcional. Props opcionais podem ser undefined se o componente pai não as passar.

<script setup lang="ts">
const props = defineProps<{
  title: string
  subtitle?: string
}>()
</script>

Valores padrão com withDefaults

A forma baseada em tipos não tem um local para valores padrão, por isso o Vue fornece withDefaults. Envolva defineProps e forneça um objeto de valores padrão.

<script setup lang="ts">
const props = withDefaults(defineProps<{
  title?: string
  count?: number
}>(), {
  title: 'Untitled',
  count: 0
})
</script>

Usando props no modelo

As props são reativas. Faça referência a elas diretamente no modelo ou por meio de props.x no script.

<template>
  <h1>{{ title }}</h1>
  <p>Count: {{ count }}</p>
</template>

As props são somente leitura

Nunca altere uma prop dentro do componente filho. As props fluem em uma única direção: do pai para o filho. Se precisar de uma cópia local editável, derive-a com computed ou com um ref local.

Declarando eventos com defineEmits

defineEmits declara quais eventos um componente pode emitir. A forma em tempo de execução recebe uma matriz de nomes de eventos.

<script setup>
const emit = defineEmits(['submit', 'cancel'])
function onSave() { emit('submit') }
</script>

Eventos tipados com TypeScript

A forma baseada em tipos permite especificar os nomes dos eventos e os tipos das cargas úteis. Isso detecta erros como emitir um argumento do tipo incorreto.

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'submit', payload: string): void
  (e: 'cancel'): void
}>()
</script>

Emitindo com uma carga útil

Chame emit com o nome do evento e quaisquer dados. O componente pai escuta com @submit e recebe a carga útil.

<script setup lang="ts">
const emit = defineEmits<{ (e: 'submit', value: string): void }>()
function send() { emit('submit', 'hello') }
</script>

Combinando tudo

Um componente filho recebe uma prop title e emite um evento submit. O componente pai reage a ambos — dados unidirecionais, tipados e organizados, além de eventos explícitos.

<script setup lang="ts">
defineProps<{ title: string }>()
const emit = defineEmits<{ (e: 'submit', v: string): void }>()
</script>

Verificação rápida

Verifique sua compreensão de props e emits.

Recapitulação

Você aprendeu sobre entradas e saídas de componentes em <script setup>:

  • defineProps declara entradas (um objeto em tempo de execução ou um genérico de TS).
  • Use ? para props opcionais e withDefaults para valores padrão.
  • As props são somente leitura e fluem em uma única direção.
  • defineEmits declara eventos, com nomes e cargas úteis tipados opcionalmente.

Perguntas Frequentes

A aula “defineProps e defineEmits” é grátis?

Sim — o texto completo de “defineProps e defineEmits” é 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 Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “defineProps e defineEmits”?

Props tipadas com defineProps (), defineEmits () e withDefaults() para valores padrão. Você pratica Vue 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 Vue Academy?

Nenhuma experiência prévia é necessária. Vue 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 2 de 4.

Quanto tempo leva a aula “defineProps e defineEmits”?

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 Vue Academy?

Sim. Cada aula de Vue 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

  1. Introdução a script setup
  2. defineProps e defineEmits
  3. defineExpose e useAttrs
  4. Importação e uso de composables em script setup
← Voltar para Vue Academy