Como usar acessórios para criar componentes Vue melhores
As props do Vue permitem registrar atributos personalizados em um componente. Descubra exatamente como usá-los.
Um dos principais recursos do Vue é sua arquitetura modular, que permite construir aplicativos 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 transmitir aos seus componentes filhos com adereços. Aqui, você aprenderá como usar props no Vue para transmitir dados de componentes pai para filho.
O que são acessórios no Vue?
Props – abreviação de “propriedades” – são atributos personalizados no Vue que um componente pai pode transmitir 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 esses adereços passados, 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 acessórios economizam tempo e esforço, pois você pode reutilizar componentes em vez de criar novos componentes do zero.
Como passar acessórios no Vue
Passar adereços no Vue é simples e diferente da maneira como você passa adereços no React. Para passar uma propriedade de um componente pai para seu componente filho no Vue, use a opção props no script do componente filho.
Aqui está um exemplo:
<!-- The child component -->
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ emailAddress }}</p>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props: ["title", "message", "emailAddress"],
};
</script>
O bloco de código acima descreve um componente filho Vue utilizando adereços para passar dados de um componente pai. O componente inclui três elementos HTML que exibem as propriedades title, message e emailAddress com interpolação.
A opção props no componente filho recebe uma série de propriedades. Esta 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 props:
<!-- parent component -->
<template>
<div>
<child-component
title="Hello World"
message="This is a message from the parent component"
emailAddress="user0000@example.com"
/>
</div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
};
</script>
O componente pai no bloco de código acima passa três adereços para o componente filho. O bloco de código passa valores estáticos para os adereços title, message e emailAddress.
Você também pode passar valores dinâmicos para seus objetos com a diretiva v-bind. v-bind é uma diretiva usada no Vue para vincular dados a atributos HTML.
Aqui está um exemplo do componente pai Vue utilizando a diretiva v-bind para passar valores dinâmicos para os objetos:
<!-- parent component -->
<template>
<div>
<child-component
:title= "title"
:message= "message"
:emailAddress= "emailAddress"
/>
</div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.vue";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
data() {
return {
title: "Welcome dear",
message: "How are you",
emailAddress: "user0000@gmail.com",
};
},
};
</script>
Usando a diretiva v-bind para passar dados para o componente filho, você pode atualizar os valores dos objetos com base no estado do componente pai. Por exemplo, ao alterar a propriedade de dados title no componente pai, a propriedade title passada para o componente filho também será atualizada.
Este método de definir adereços como uma matriz de strings é um padrão abreviado. Cada uma das strings na matriz representa um adereço. Este método é ideal quando todos os objetos do array possuem o mesmo tipo de dados JavaScript.
Definindo Props como um Objeto no Vue
Definir props como um objeto JavaScript em vez de um array 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 e o valor padrão de cada prop.
Além disso, você pode marcar adereços específicos como necessários, acionando um aviso se o adereço não for fornecido quando o componente estiver em uso. Definir adereços como um objeto oferece diversas vantagens em relação à definição de adereços 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.
- Ao marcar os adereços 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:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
<p>{{ emailAddress }}</p>
</div>
</template>
<script>
export default {
name: "ChildComponent",
props: {
title: {
type: String,
default: "Default Title",
},
message: {
type: String,
default: "Default Message",
},
emailAddress: {
type: String,
required: true,
},
},
};
</script>
Este bloco de código é um exemplo de componente Vue.js que usa adereços para passar dados de um componente pai para um componente filho. O bloco de código define esses adereços como objetos com um tipo e valor padrão ou um sinalizador obrigatório.
O bloco de código define os adereços title e message como strings com um valor default e o adereço emailAddress como um < string forte>obrigatória.
Escolha o melhor método adequado ao seu aplicativo Vue
Você aprendeu como definir adereços como array e objeto. Sua preferência deve atender às necessidades específicas do seu aplicativo.
Vue prova ser uma estrutura JavaScript muito flexível. 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.