SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
Apresentado por Danilo Pinotti
Utilizando componentes
dentro de componentes
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
Utilizando componentes dentro de componentes
Configuração dos
componentes filhos
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.
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.
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.
Comunicação entre componentes: Eventos
Comunicação entre componentes
Resumidamente:
Comunicação de Pai para Filho: Props
Comunicação de Filho para Pai: Eventos
Análise e estudo de código
Próximos passos
- Renderização condicional (v-if)
- Watchers
- Loops
- Hooks
Dúvidas?
Obrigado

Mais conteúdo relacionado

Mais de Danilo Pinotti

Mais de Danilo Pinotti (7)

Minicurso de Expressões Regulares (REGEX)
Minicurso de Expressões Regulares (REGEX)Minicurso de Expressões Regulares (REGEX)
Minicurso de Expressões Regulares (REGEX)
 
Minicurso GIT Completo (2022)
Minicurso GIT Completo (2022)Minicurso GIT Completo (2022)
Minicurso GIT Completo (2022)
 
Minicurso GIT 2022 - SENAC
Minicurso GIT 2022 - SENACMinicurso GIT 2022 - SENAC
Minicurso GIT 2022 - SENAC
 
Talk sobre testes automatizados. Parte 1/2
Talk sobre testes automatizados. Parte 1/2Talk sobre testes automatizados. Parte 1/2
Talk sobre testes automatizados. Parte 1/2
 
O básico sobre Vue 2. Talk Vue Básico 1/3
O básico sobre Vue 2. Talk Vue Básico 1/3O básico sobre Vue 2. Talk Vue Básico 1/3
O básico sobre Vue 2. Talk Vue Básico 1/3
 
Alguns Helpers do Laravel 5.6
Alguns Helpers do Laravel 5.6Alguns Helpers do Laravel 5.6
Alguns Helpers do Laravel 5.6
 
Deixando aplicações Laravel mais rápidas
Deixando aplicações Laravel mais rápidasDeixando aplicações Laravel mais rápidas
Deixando aplicações Laravel mais rápidas
 

Comunicação entre componentes com Vue 2. Talk Vue Básico 2/3