Eventos personalizados com createEventDispatcher
Emita eventos personalizados tipados a partir de componentes filhos para que o componente pai os trate.
Eventos personalizados com createEventDispatcher é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 3 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 Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Por que usar eventos personalizados
Os componentes filhos se comunicam com os componentes pais disparando eventos personalizados que o pai escuta.
Importar o despachante
Importe createEventDispatcher de svelte e crie um dentro do seu script.
<script>
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>Disparar um evento
Chame dispatch(name, detail) para emitir o evento. Os pais escutam com on:name.
function save() { dispatch("save", { id: 42 }); }Escutar no componente pai
Trate eventos personalizados como eventos do DOM.
<Child on:save={(e) => console.log(e.detail.id)} />Detalhes do evento
O segundo argumento se torna event.detail no lado do consumidor.
Sem propagação por padrão
Eventos personalizados não se propagam automaticamente pelas árvores de componentes do Svelte. Encaminhe-os explicitamente se necessário.
Eventos tipados
Com TypeScript, você pode tipar os eventos para obter preenchimento automático nos componentes pais.
const dispatch = createEventDispatcher<{ save: { id: number } }>();Eventos canceláveis
Passe { cancelable: true } como terceiro argumento para permitir que os pais usem preventDefault.
Vários eventos
Um despachante pode emitir muitos tipos de evento; use nomes exclusivos para cada intenção.
Evite nomes genéricos
Prefira nomes específicos, como itemSelected, em vez de nomes genéricos, como change.
Evento ou função de retorno
Eventos são bons para sinais enviados ao componente pai; para uma integração estreita, considere passar propriedades de função de retorno.
Verificação rápida
Como o componente pai lê os dados do evento?
Recapitulação
Use createEventDispatcher para emitir eventos nomeados com uma carga de detalhes e escute-os com on:eventName.
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 “Eventos personalizados com createEventDispatcher” é grátis?
Sim — o texto completo de “Eventos personalizados com createEventDispatcher” é 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 Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Eventos personalizados com createEventDispatcher”?
Emita eventos personalizados tipados a partir de componentes filhos para que o componente pai os trate. Você pratica Sveltejs 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 Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs 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 3 de 4.
Quanto tempo leva a aula “Eventos personalizados com createEventDispatcher”?
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 Sveltejs Academy?
Sim. Cada aula de Sveltejs 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
- on:click on:input on:submit
- Modificadores de eventos: preventDefault stopPropagation once
- Eventos personalizados com createEventDispatcher
- Encaminhando eventos com on:click