As props do Vue permitem que você registre atributos personalizados em um componente. Descubra exatamente como usá-los.
Um dos principais recursos do Vue é sua arquitetura modular, que permite criar aplicativos da Web combinando componentes pequenos e reutilizáveis. Isso permite que você atualize e mantenha seu aplicativo da web facilmente.
Cada componente no Vue pode ter seu próprio conjunto de dados e métodos, que você pode passar para seus componentes filhos com props. Aqui, você aprenderá como usar props no Vue para passar dados de componentes pai para filho.
O que são adereços no Vue?
Props - abreviação de "propriedades" - são atributos personalizados no Vue que um componente pai pode passar para seus componentes filhos.
No Vue, os componentes pais passam props para os componentes filhos em um fluxo unidirecional. Isso significa que os componentes filhos só podem ler e utilizar essas props passadas, mas não podem modificar os dados.
O uso de props permite criar componentes reutilizáveis que podem ser aplicados em todo o aplicativo. Os adereços economizam tempo e esforço, pois você pode reutilizar componentes em vez de criar novos componentes do zero.
Como Passar Props no Vue
Passar props no Vue é simples e diferente da forma que você passa adereços em React. Para passar um prop de um componente pai para seu componente filho no Vue, use a opção props no script do componente filho.
Aqui está um exemplo:
O componente filho
<modelo>
<div>
<h1>{{ título }}h1>
<p>{{ mensagem }}p>
<p>{{ endereço de email }}p>
div>
modelo>
<roteiro>
padrão de exportação {
nome: "Componente Filho",
props: ["título", "mensagem", "emailAddress"],
};
roteiro>
O bloco de código acima descreve um componente filho Vue utilizando props para passar dados de um componente pai. O componente inclui três elementos HTML que exibem o título, mensagem, e endereço de email propriedades com interpolação.
O adereços opção no componente filho leva em uma matriz de propriedades. Essa matriz define as propriedades que o componente filho aceita do componente pai.
Aqui está um exemplo de um componente pai Vue passando dados para o componente filho com adereços:
componente pai
<modelo>
<div>
<componente filho
title="Olá Mundo"
message="Esta é uma mensagem do componente pai"
emailAddress="[email protected]"
/>
div>
modelo><roteiro>
import ChildComponent de "./components/ChildComponent.vue";
padrão de exportação {
nome: "Componente Pai",
componentes: {
Componente filho,
},
};
roteiro>
O componente pai no bloco de código acima passa três props para o componente filho. O bloco de código passa valores estáticos para o título, mensagem, e endereço de email adereços.
Você também pode passar valores dinâmicos para seus props com o v-bind diretiva. v-bind é uma diretriz usado no Vue para vincular dados aos atributos HTML.
Aqui está um exemplo do componente pai Vue utilizando o v-bind diretiva para passar valores dinâmicos para as props:
componente pai
<modelo>
<div>
<componente filho
:título= "título"
:mensagem= "mensagem"
:emailAddress= "emailAddress"
/>
div>
modelo><roteiro>
import ChildComponent de "./components/ChildComponent.vue";
padrão de exportação {
nome: "Componente Pai",
componentes: {
Componente filho,
},
dados() {
retornar {
título: "Bem-vindo querido",
mensagem: "Como vai você",
endereço de e-mail: "[email protected]",
};
},
};
roteiro>
Usando o v-bind diretiva para passar dados para o componente filho, você pode atualizar os valores das props com base no estado do componente pai. Por exemplo, alterando o título propriedade de dados no componente pai, o título prop passado para o componente filho também será atualizado.
Este método de definir props como um array de strings é um padrão abreviado. Cada uma das strings no array representa um prop. Este método é ideal quando todos os props no array têm o mesmo Tipo de dados JavaScript.
Definindo props como um objeto no Vue
Definir props como um objeto JavaScript em vez de uma matriz permite uma melhor personalização de cada prop. Definir props como um objeto em um componente permitirá que você especifique o tipo de dados esperado de cada prop e o valor padrão.
Além disso, você pode marcar props específicos conforme necessário, acionando um aviso se o prop não for fornecido quando o componente estiver em uso. Definir props como um objeto oferece várias vantagens sobre definir props como um array, incluindo:
- Definir o tipo de dados esperado e o valor padrão para cada prop torna mais fácil para você e sua equipe de desenvolvedores entender exatamente como usar o componente.
- Marcando props conforme necessário, você pode detectar erros no início do processo de desenvolvimento e fornecer mais informações à equipe de desenvolvedores.
Aqui está um exemplo de como definir props como um objeto em um componente Vue.js:
<modelo>
<div>
<h1>{{ título }}h1>
<p>{{ mensagem }}p>
<p>{{ endereço de email }}p>
div>
modelo>
<roteiro>
padrão de exportação {
nome: "Componente Filho",
adereços: {
título: {
tipo: String,
padrão: "Título padrão",
},
mensagem: {
tipo: String,
padrão: "Mensagem padrão",
},
endereço de email: {
tipo: String,
obrigatório: verdadeiro,
},
},
};
roteiro>
Este bloco de código é um exemplo de um componente Vue.js que usa props para passar dados de um componente pai para um componente filho. O bloco de código define essas props como objetos com um tipo e valor padrão ou um sinalizador obrigatório.
O bloco de código define o título e mensagem adereços como strings com um padrão valor e o endereço de email suporte como um obrigatório corda.
Escolha o melhor método adequado ao seu aplicativo Vue
Você aprendeu como definir props tanto como um array quanto como um objeto. Sua preferência deve atender às necessidades específicas do seu aplicativo.
O Vue prova ser um framework JavaScript muito flexível. Ele oferece muitos métodos e opções para atingir o mesmo objetivo com diferentes vantagens para qualquer uma das opções ou métodos que você escolher para trabalhar.
