Olá! Tudo bem?
Ano passado consegui aprender muita, mas muita coisa mesmo sobre o Vue. Quando eu pensei que estava fazendo bom uso, me falaram de props e eu descobri que tinha feito tudo errado até então(hehe). Talvez não errado, mas digamos que entender bem o que props são e fazem, me abriu portas e eu fiquei completamente apaixonada por reutilização e acabou me ajudando a pensar mil vezes mais na arquitetura do projeto e dos meus componentes. Era confuso entender, e eu vivia tapando o sol com a peneira com Slots Nomeados, mas eu era jovem e ingenua.
O que são props?
Props são propiedades que passamos do componente pai para o filho, nunca do filho para o pai. Digamos que no nosso projeto, um componente de card se repete em diversas páginas, mas o conteúdo do mesmo muda. Qual é a sua solução? Criar um componente de card pra cada página ou simplesmente torná-lo reutilizável e versátil? Eu não vou entrar no mérito do estilo do componente nesse post, isso é um pouquinho mais complexo e precisa ser tratado a parte, tá bem? :)
Props na prática
Esse é o meu componente pai, que vou chamar de AppCard.vue, vou importá-lo no componente filho, que nesse caso se chama home.vue.
Abaixo temos o código do nosso filho que está sendo renderizado acima. Vamo entender o que foi feito?
Determinei que temos um title, um subtitle e um content. Pegando o nosso :title="title" como exemplo, que nada mais é do que um bind, eu estou dizendo que toda vez que invocar um :title, ele vai aceitar somente uma string sendo passada, como podemos observar ali em TYPE, que aceita string, número, função, array, objeto e data, você decide. Nesse caso, eu quero apenas uma simples string. Ainda confuso? Então vamos ver como passar essas props:
E o resultado é esse:
Ok, é BEM simples, certo? Isso é apenas a pontinha do iceberg que são as props. Caso você queira tornar algum dos nossos campos obrigatórios, basta adicionar um "required", e caso queira deixar um conteúdo padrão, usamos o "default", assim caso aconteça algum erro no carregamento dos dados, não teremos um espaço em branco sendo exibido. Veja:
Bom, isso é uma introdução bem básica as props! :) Espero que seja útil e que tenha esclarecido um pouco as coisas para quem está ou não começando.
Top comments (0)