17 - Props estáticos

Olá pessoal, na décima sétima aula do treinamento de Vue.js, iremos trabalhar com props ou propriedades.

Inicialmente, precisamos compreender o que são props. O uso de props no Vue.js é muito utitlizado para enviarmos informações estáticas, variáveis e funções de um componente para outro, é uma espécie de comunicação entre componentes

Trabalhar com props é muito flexível, basta chamar um componente e criar uma propriedade, exemplo: , note que ao chamar o componente, foi referenciada uma propridade chamada nome, contendo o valor Ralf. Não existe uma nomenclatura obrigatória para trabalhar com props, basta adicionar um nome de propridade que faça sentido.

Os propssão divididos em duas categorias: estáticos e dinâmicos, abaixo deixarei explícito a diferença de cada um:

• Estático: Quando enviamos informações diretamente no componente, pode ser um texto, número, vetor ou objeto.
• Dinâmico: Quando enviamos uma variável ou uma função.

Vamos praticar, neste primeiro momento iremos enviar um nome e uma idade de um componente para outro, crie um componente chamado Exemplo11Props1.vue, com a seguinte estrutura:

Agora podemos criar nosso segundo componente, responsável por exibir o nome e a idade, este comento irá se chamar Exemplo11Props2.vue:

Em seguida, no arquivo App.vue, iremos importar nosso componente e realizar a referência na estrutura HTML:

Abaixo deixo um vídeo mostrando cada etapa desta aula: