O documento discute a comunicação entre componentes em Vue.js, explicando que props são usadas para passar dados de um componente pai para um filho, enquanto eventos permitem que um filho comunique algo de volta para o pai. Componentes podem ter escopo global ou local. Configuração de componentes filhos é feita principalmente via props.

1. Apresentado por Danilo Pinotti

2. Utilizando componentes
dentro de componentes

3. Utilizando componentes dentro de componentes: Escopo
- Escopo global
- Componentes declarados no componente raíz.
- Utilizados em todas as partes do sistema.
- Cuidado
- Escopo local
- Componentes importados e utilizados somente nos
componentes que precisam

4. Utilizando componentes dentro de componentes

5. Configuração dos
componentes filhos

6. Configuração dos componentes filhos: Props
Props são propriedades utilizadas para configuração de um componente.
Além disso, nativamente, props é a maneira mais correta de comunicação de um
componente pai para um filho.

7. Configuração dos componentes filhos: Props
A declaração de uma prop deve ser feita utilizando camelCase e, sua utilização
(componente pai), em kebab-case.
A utilização de uma prop, dentro do componente, é igual à utilização de um dado
comum, ou seja: this.nomeDaProp
Atenção: Quando utiliza-se o ‘dois pontos’, a prop é
interpretada como um trecho de código javascript, caso
contrário, será interpretado como string.

9. Configuração dos componentes filhos: Events
Nativamente, comunicação por eventos é a maneira correta de comunicação de
um componente filho para um pai.
A emissão de um evento é realizada através do método $emit.
A observação de um evento pelo componente pai, é feita colocando um @
seguido do nome do evento. Exemplo: @click
Obs: Na documentação oficial recomenda-se sempre utilizar kebab-case tanto no
nome do evento quanto observação dele.

10. Comunicação entre componentes: Eventos

11. Comunicação entre componentes
Resumidamente:
Comunicação de Pai para Filho: Props
Comunicação de Filho para Pai: Eventos

12. Análise e estudo de código

13. Próximos passos
- Renderização condicional (v-if)
- Watchers
- Loops
- Hooks

14. Dúvidas?

15. Obrigado