Props de componentes

Concluído

Elementos HTML são blocos de construção para a criação de páginas. Você pode configurar o comportamento deles definindo atributos para valores diferentes. Conforme realçado anteriormente, a criação de um componente é semelhante à criação de uma marca HTML personalizada. Como resultado, você pode passar informações para aprimorar a reutilização de componentes por meio de props.

Definindo props

Props, que vem da abreviação de propriedades, são um conjunto de valores que você pode passar para um componente. Normalmente, você adiciona props a um componente para passar os valores que ele deve exibir ou alterar seu comportamento.

Você define os props de um componente adicionando o campo props dentro do elemento script. Você pode listar os nomes dos props de um componente listando-os em uma matriz:

<!-- UserDisplay component -->
<script>
export default {
    name: 'UserDisplay',
    props: ['name', 'age']
}
</script>

O chamador do componente define props usando a mesma sintaxe que um atributo HTML. Supondo o componente anterior, podemos definir name e age da seguinte maneira:

<!-- inside parent component -->
<template>
    <user-display name='Cheryl' age='28'></user-display>
</template>
<script>
import UserDisplay from './UserDisplay.vue';
export default {
    components: {
        UserDisplay
    }
}
</script>

Os valores Cheryl e 28 são associados às propriedades name e age, respectivamente, por meio de uma associação de atributo.

Observação

O Vue.js converte o componente chamado UserDisplay em user-display no padrão de maiúsculas e minúsculas kebab.

Restringindo tipos

O chamador pode passar valores de qualquer tipo listando-os como parte de uma matriz. Esse método pode ser apropriado para aplicativos básicos, mas, muitas vezes, você vai querer indicar quais tipos de dados está esperando de cada propriedade.

Você pode fornecer informações mais robustas sobre os props definindo um esquema. Se quiser indicar que name deve ser uma cadeia de caracteres e age deve ser um número, você poderá definir seu esquema de props como o seguinte:

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        name: String,
        age: Number
    }
}
</script>

Observe como você está criando um objeto de prop com os tipos para name e age. Agora, esse componente aceitará apenas os tipos de dados especificados. Você ainda pode defini-los como antes:

<!-- inside parent component -->
<user-display name='Cheryl' age='28'></user-display>

No entanto, se você definir tipos de dados como valores que não correspondem ao esquema, como passar um número para name, receberá um aviso no console. O aviso solicitará que você execute uma ação.

Objetos complexos

Quando você está trabalhando com Vue, normalmente trabalha com objetos em vez de valores individuais. Felizmente, você pode declarar estruturas complexas com props.

Se você estiver usando um objeto User com as propriedades name e age, poderá declará-lo como um constructo completo nas propriedades:

<!-- UserDisplay component script -->
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

Você pode definir o valor usando o atributo como fez anteriormente. Além disso, você pode transmitir dados dinâmicos especificando o nome do objeto que deseja usar. No seguinte exemplo, uma parte dos dados chamada user é passada usando a mesma sintaxe que valores estáticos:

<!-- parent component -->
<template>
<user-display :user="user"></user-display>
</template>

<script>
import UserDisplay from './UserDisplay.vue';
export default {
    data() {
        return {
            user: {
                firstName: 'Cheryl',
                age: 28
            }
        }
    },
    components: {
        UserDisplay
    }
}
</script>

Usando props dentro de um componente

Dentro de um componente, os props podem ser lidos da mesma maneira como você leria dados. O componente UserDisplay completo pode ter a seguinte aparência:

<template>
    <div>Name: {{ user.name }}</div>
    <div>Age: {{ user.age }}</div>
</template>
<script>
export default {
    name: 'UserDisplay',
    props: {
        user: {
            name: String,
            age: Number
        }
    }
}
</script>

Importante

Diferente dos dados com estado, os valores passados por meio de props são uma associação unidirecional. Se forem feitas alterações em um prop, essas atualizações não retornarão ao pai.