Alô, gente! Seguimos firmes e fortes por aqui no projeto, mesmo num domingão de sol 😂 Hoje, ainda no tópico das mudanças que o Vue 3 trouxe na utilização do Vue, vou falar um pouquinho sobre o uso das props na nova versão do Vue.
Props
Como em todos os outros tópicos até agora, vou tentar fazer uma breve explicação do que são as props antes de introduzir as mudanças na utilização em relação a versão 2. Antes de entender as props, temos que entender um pouco sobre componentização.
- Componentes -> Componentes são um termo conhecido na área de software e não se aplicam somente à aplicações web. Eles surgiram com a ideia, de entre outras coisas, tornar o nosso projeto mais organizado e nosso código mais reutilizável, separando nossa aplicação em partes menores. Veja um exemplo abaixo:
- Nesse caso, ao invés de mantermos toda a página num único código, podemos fragmentá-lo em partes menores e reutilizáveis. Como por exemplo no caso do componente Header: caso precisemos utilizá-los novamente em outra página do nosso app, podemos simplesmente importá-lo e utilizá-lo, sem a necessidade de reescrever o mesmo código em todas as páginas nas quais ele é necessário.
- Agora que já entendemos um pouco dos componentes, podemos entrar no assunto de hoje: as propriedades(ou também carinhosamente chamadas de props).
- As props servem simplesmente para passarmos dados de um componente pai para um componente filho. Podemos utilizar como exemplo o componente listaArticle: nele podemos ter uma lista de artigos que queremos listar na nossa página principal. Para passarmos esses dados no nosso componente pai (listaArticle), para o componente filho (Article), utilizamos as props. Agora bora ver um exemplo com código para entendermos como vamos utilizar esse conceito no Vue 3.
- Para que já estava familiarizado com a utilização das props no Vue 2, pouca coisa mudou no Vue 3. A única mudança é quando queremos utilizá-las dentro da nossa função setup(). Nesse caso precisamos receber ela como parâmetro da função e acessar a prop através da notação ponto. O código acima produz o seguinte resultado:
Podemos ver que além do título recebido pelo componente pai, adicionamos mais uma string ao título através de uma computed property.
Finalizando
Pouca coisa mudou quando consideramos a utilização das props no Vue 2 para o Vue 3. Uma dica importante é que podemos ficar tentados a no momento de recebê-las como argumento na função setup utilizar a desestruturação, mas isso faz com que elas deixem de ser propriedades reativas, portanto devemos receber sempre o objeto props inteiro e dentro da função acessar os valores que desejamos.