![Vue 2 - Componentes [2 de 2 - 2020]](https://image.slidesharecdn.com/2-221112164215-daea4db6/85/Vue-2-Componentes-2-de-2-2020-8-320.jpg)
Vue 2 - Componentes [2 de 2 - 2020]
- 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
- 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