Artigo original: How to Use Props in Vue.js
Escrito por: Joel Olawanle
Usamos props para passar informações/dados de um componente pai para componentes filhos. Neste artigo, vou explicar tudo o que você precisa saber sobre props e por que você deve usar props no Vue.js.
Aqui está um breve resumo do que vamos cobrir neste guia:
- O que são props no Vue.js?
- Como registrar props dentro de um componente
- Como trabalhar com várias props
- Tipos de props no Vue.js
- Como passar dados para props
- Como passar funções para props
- Como validar props
- Como definir valores padrão para props
O que são as props no Vue.js?
"Props" é uma palavra-chave especial que significa propriedades. Elas podem ser registradas em um componente para passar dados de um componente pai para um de seus componentes filhos.
É muito mais fácil de usar em comparação com as bibliotecas de gerenciamento de estado, como o vuex, para aplicações do Vue.js.
Os dados em props só podem fluir em um sentido – de cima, ou do componente pai, para baixo, ou para os componentes filhos. Isso simplesmente significa que você não pode passar dados de um filho para um pai.
Outra coisa a se ter em mente é que props são apenas para leitura e não podem ser modificadas pelo componente filho porque é o componente pai quem "possui" esse valor.
Vamos equilibrar as coisas agora – os componentes pais passam props para os componentes filhos enquanto os componentes filhos emitem eventos para os componentes pais.
Como registrar props em um componente
Vamos agora dar uma olhada em como podemos registrar props dentro de um componente.
Vue.component('user-detail', {
props: ['name'],
template: '<p>Hi {{ name }}</p>'
})
.js
ou, em um componente de arquivo único do Vue:
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
props: ['name']
}
</script>
No código acima, registramos uma prop chamada name que podemos chamar na seção de template da nossa aplicação.
Observação: este é o componente filho e essa prop vai receber dados do componente pai. Vou explicar isso mais adiante.
Como trabalhar com várias props
Você pode ter mais de uma prop adicionando-as ao array de props, assim:
Vue.component('user-detail', {
props: ['firstName', 'lastName'],
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
ou, em um componente de arquivo único do Vue:
<template>
<p>Hi {{ firstName }} {{ lastName }}</p>
</template>
<script>
export default {
props: [
'firstName',
'lastName'
],
}
</script>
Tipos de props no Vue.js
Para especificar o tipo de prop que você deseja usar no Vue, você usará um objeto em vez de um array. Você usará o nome da propriedade como a chave de cada propriedade e o tipo como o valor.
Se o tipo de dado passado não corresponder ao tipo da prop, o Vue envia um alerta (em modo de desenvolvimento) no console com um aviso. Os tipos válidos que você pode usar são:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
Vue.component('user-detail', {
props: {
firstName: String,
lastName: String
},
template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})
ou, em um componente de arquivo único do Vue:
<template>
<p>Hi {{ firstName }} {{ lastName }}</p>
</template>
<script>
export default {
props: {
firstName: String,
lastName: String
},
}
</script>
Como passar dados para props no Vue
O principal objetivo de usar props é passar dados/informações para baixo. Você pode passar seu valor como uma propriedade de dados usando v-bind, como neste código:
<template>
<ComponentName :title=title />
</template>
<script>
export default {
//...
data() {
return {
title: 'Entendendo props no Vue.js'
}
},
//...
}
</script>
ou como um valor estático, assim:
<ComponentName title="Entendendo props no Vue.js" />
Suponha que estamos criando uma aplicação que tem vários botões com diferentes cores de texto/fundo. Em vez de repetir a sintaxe do botão em todos os nossos arquivos, é melhor criar um componente de botão e então passar as cores de texto/fundo como props.
Aqui está o componente pai:
<template>
<div id="app">
<Button :name='btnName' bgColor='red' />
<Button :name='btnName' bgColor='green' />
<Button :name='btnName' bgColor='blue' />
</div>
</template>
<script>
import Button from './components/Button'
export default {
name: 'App',
data(){
return{
btnName:"Joel",
}
},
components: {
Button
}
}
</script>
Aqui está o componente filho:
<template>
<button class="btn" :style="{backgroundColor:bgColor}">{{name}}</button>
</template>
<script>
export default {
name: 'Button',
props:{
name:String,
bgColor:String
}
}
</script>
O código acima mostra como usar tanto a propriedade de dados quanto valores estáticos quando você está recebendo dados de um componente pai e usando esses dados em um componente filho.
Observação: você também pode usar um operador ternário dentro do valor da prop para verificar uma condição verdadeira e passar um valor que dependa dela.
<template>
<div id="app">
<Button :tagUser="signedUp ? 'Logout' : 'Login'" bgColor='red' />
</div>
</template>
<script>
import Button from './components/Button'
export default {
name: 'App',
data(){
return{
signedUp: true,
}
},
components: {
Button
}
}
</script>
Como passar funções para props
Passar uma função ou um método para um componente filho como prop é relativamente simples. Basicamente, é o mesmo processo que passar qualquer outra variável.
Há razões, porém, pelas quais você não deve usar props como funções – em vez disso, você deve usar emit. Este artigo (texto em inglês) explica corretamente o porquê.
<template>
<ChildComponent :function="newFunction" />
</template>
<script>
export default {
methods: {
newFunction() {
// ...
}
}
};
</script>
Como validar props no Vue
O Vue torna a validação de props muito fácil. Tudo o que você precisa fazer é adicionar a chave required e seu valor à prop. Podemos validar tanto pelo tipo da prop quanto pelo uso de required:
props: {
name: {
type: String,
required: true
}
}
Como definir valores padrão para props
Antes de concluir este artigo, vamos agora ver como definir valores padrão para nossas props. Valores padrão são renderizados se o componente filho não conseguir obter dados do componente pai.
O Vue permite que você especifique um valor padrão, assim como especificamos required anteriormente.
props: {
name: {
type: String,
required: true,
default: 'John Doe'
},
img: {
type: String,
default: '../image-path/image-name.jpg',
},
}
Você também pode definir o valor padrão como um objeto. Esse pode ser uma função que retorna um valor apropriado, em vez de ser o valor real.
Conclusão
Neste artigo, aprendemos o que as props fazem e como elas funcionam no Vue.js.
Em resumo, usamos props para passar dados dos componentes pais para os componentes filhos. O componente filho também emite eventos para os componentes pais caso você precise enviar dados/eventos do filho para o componente pai.
Obrigado pela leitura!
Links úteis (em inglês)