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.
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
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.
8.
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.