Vue Academy · Aula

Props e eventos personalizados

Passe dados para baixo com props e emita eventos para os componentes pais.

Props e eventos personalizados é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 3. 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 3 aulas no total.

Comunicação entre pai e filho

Os componentes se comunicam em duas direções:

Props passam dados do pai para o filho
Eventos enviam mensagens do filho para o pai

Esse fluxo de dados unidirecional mantém os aplicativos previsíveis.

Declarando props

Um filho declara as props que aceita. Em script setup, use defineProps.

<script setup>
const props = defineProps(['title', 'count'])
</script>

<template>
  <h2>{{ title }}</h2>
  <p>{{ count }}</p>
</template>

Props com tipos

Declare props como um objeto para especificar tipos para validação.

<script setup>
defineProps({
  title: String,
  count: Number,
  isActive: Boolean
})
</script>

Props com valores padrão e obrigatórios

Você pode marcar props como obrigatórias e fornecer valores padrão.

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  count: {
    type: Number,
    default: 0
  }
})
</script>

Passando props de um pai

O pai passa dados como atributos. Use : para vincular valores dinâmicos.

<template>
  <ProductCard
    title="Coffee Mug"
    :count="stock"
    :is-active="available"
  />
</template>

<!-- static string vs bound expression -->

Convenção de nomes para props

Declare props em camelCase no JS e passe-as em kebab-case nos modelos.

Prop no JS: isActive
Atributo no modelo: :is-active

O Vue converte automaticamente entre os dois formatos.

Props são somente leitura

Um filho não deve alterar suas props diretamente.

As props fluem em uma só direção, para baixo
Alterá-las prejudica a previsibilidade e gera avisos
Para alterar dados compartilhados, emita um evento para que o pai os atualize

Declarando eventos emitidos

Um filho declara os eventos que emite com defineEmits.

<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>

Emitindo um evento

Chame a função emit para enviar um evento para cima, opcionalmente com uma carga útil.

<script setup>
const emit = defineEmits(['add'])

function handleClick() {
  emit("add", { id: 1, name: "Item" })
}
</script>

<template>
  <button @click="handleClick">Add</button>
</template>

Emitindo na API de Opções

Na API de Opções, você chama this.$emit em vez disso.

export default {
  emits: ["save"],
  methods: {
    onSave() {
      this.$emit("save", this.formData)
    }
  }
}

O pai escuta eventos

O pai escuta com @event-name e recebe a carga útil.

<template>
  <TodoItem
    :task="task"
    @delete="removeTask"
    @add="onAdd"
  />
</template>

<script setup>
function onAdd(item) {
  console.log("Added:", item.name)
}
</script>

Verificação rápida

Teste sua compreensão sobre props e eventos.

Recapitulação: props e eventos

Você aprendeu sobre a comunicação entre componentes:

defineProps declara props com tipos e valores padrão
As props fluem para baixo e são somente leitura
defineEmits declara eventos
emit("name", payload) envia eventos para cima
O pai escuta com @event

Próximo: slots e slots com escopo.

Perguntas Frequentes

A aula “Props e eventos personalizados” é grátis?

Sim — o texto completo de “Props e eventos personalizados” é 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 3 aulas no total.

O que vou aprender em “Props e eventos personalizados”?

Passe dados para baixo com props e emita eventos para os componentes pais. 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 3.

Quanto tempo leva a aula “Props e eventos personalizados”?

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

← Voltar para Vue Academy