O documento discute como utilizar componentes dentro de outros componentes no Vue.js, abordando os tópicos de escopo de componentes, configuração de componentes filhos via props e comunicação entre componentes via eventos. 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.

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