11. Eventos customizados (Introdução ao Vue.js)

Nesse tópico vamos aprender a criar nossos eventos customizados.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Além disso, se você ficou com dúvidas sobre como criar o compoente no 10. Componentes. Segue o código da estrutura no Github para você entender :)

Eventos customizados

Vamos aprender a criar nossos eventos customizados.

Objetivo

Criar um componente chamado text-color.vue para emitir um evento customizado para o componente pai (meme-generator) alterar a cor do texto.

Criar componente — text-color.vue

Importar o componente

Property colors ir not defined

Componente (Props)

Propriedades são atributos customizados que você pode registrar em um componente.

Propriedades do componente

• Propriedades podem ter tipos, ser obrigatórias, e ter valores default.

Problema

Como vou comunicar o componente pai, que preciso atualizar a cor do texto?

Solução

Criar um evento customizado para enviar a cor do texto que o usuário clicou para o componente pai atualizar a cor do texto.

Eventos customizados

Evento disparado

Componente Meme Generator

Código no Github

11. Eventos customizados — (O que aprendemos)

• Um componente pode emitir eventos com o $emit;
• Um componente pode ouvir eventos com o $on;
• Um componente pode emitir dados em conjunto com o evento $emit.

Próximo post

12. Desafios (Introdução ao Vue.js)

Referências

Custom Events - Vue.js