Vues rekvisita låter dig registrera anpassade attribut på en komponent. Ta reda på exakt hur du använder dem.
En av nyckelfunktionerna i Vue är dess modulära arkitektur, som gör att du kan bygga webbappar genom att kombinera små, återanvändbara komponenter. Detta gör att du enkelt kan uppdatera och underhålla din webbapp.
Varje komponent i Vue kan ha sin egen uppsättning data och metoder, som du kan överföra till dess underordnade komponenter med rekvisita. Här kommer du att lära dig hur du använder rekvisita i Vue för att överföra data från överordnade till underordnade komponenter.
Vad är rekvisita i Vue?
Rekvisita – förkortning för "egenskaper" – är anpassade attribut i Vue som en överordnad komponent kan överföra till sina underordnade komponenter.
I Vue skickar överordnade komponenter rekvisita till underordnade komponenter i ett enkelriktat flöde. Detta innebär att underordnade komponenter bara kan läsa och använda dessa godkända rekvisita men inte kan ändra data.
Genom att använda rekvisita kan du skapa återanvändbara komponenter som du kan använda i hela din applikation. Rekvisita sparar tid och ansträngning, eftersom du kan återanvända komponenter istället för att skapa nya komponenter från grunden.
Hur man skickar rekvisita i Vue
Att passera rekvisita i Vue är enkelt och annorlunda än hur du passerar rekvisita i React. För att överföra en rekvisita från en överordnad komponent till dess underordnade komponent i Vue, använd alternativet för rekvisita i den underordnade komponentens skript.
Här är ett exempel:
Barnkomponenten
<mall>
<div>
<h1>{{ title }}h1>
<sid>{{ meddelande }}sid>
<sid>{{ e-postadress }}sid>
div>
mall>
<manus>
export standard {
namn: "ChildComponent",
rekvisita: ["titel", "meddelande", "e-postadress"],
};
manus>
Ovanstående kodblock beskriver en Vue underordnad komponent som använder rekvisita för att skicka data från en överordnad komponent. Komponenten innehåller tre HTML-element som visar titel, meddelande, och e-postadress egenskaper med interpolation.
De rekvisita alternativet i den underordnade komponenten tar in en rad egenskaper. Denna array definierar egenskaperna som den underordnade komponenten accepterar från den överordnade komponenten.
Här är ett exempel på en Vue-förälderkomponent som skickar data till den underordnade komponenten med rekvisita:
överordnad komponent
<mall>
<div>
<barn-komponent
title="Hej världen"
message="Detta är ett meddelande från den överordnade komponenten"
emailAddress="anvä[email protected]"
/>
div>
mall><manus>
importera ChildComponent från "./components/ChildComponent.vue";
export standard {
namn: "ParentComponent",
komponenter: {
ChildComponent,
},
};
manus>
Den överordnade komponenten i kodblocket ovan skickar tre rekvisita till den underordnade komponenten. Kodblocket skickar statiska värden till titel, meddelande, och e-postadress rekvisita.
Du kan också skicka dynamiska värden till dina rekvisita med v-binda direktiv. v-binda är ett direktiv används i Vue för att binda data till HTML-attribut.
Här är ett exempel på Vue-förälderkomponenten som använder v-binda direktiv för att skicka dynamiska värden till rekvisita:
överordnad komponent
<mall>
<div>
<barn-komponent
:title= "titel"
:meddelande= "meddelande"
:emailAddress= "emailAddress"
/>
div>
mall><manus>
importera ChildComponent från "./components/ChildComponent.vue";
export standard {
namn: "ParentComponent",
komponenter: {
ChildComponent,
},
data() {
lämna tillbaka {
titel: "Välkommen kära",
meddelande: "Hur mår du",
e-postadress: "[email protected]",
};
},
};
manus>
Använda v-binda direktiv för att skicka data till den underordnade komponenten, kan du uppdatera rekvisitans värden baserat på den överordnade komponentens tillstånd. Till exempel genom att ändra titel dataegenskapen i den överordnade komponenten titel prop som skickas till den underordnade komponenten kommer också att uppdateras.
Denna metod för att definiera rekvisita som en rad strängar är ett stenografimönster. Var och en av strängarna i arrayen representerar en rekvisita. Denna metod är idealisk när alla rekvisita i arrayen har samma JavaScript-datatyp.
Definiera rekvisita som ett objekt i Vue
Att definiera rekvisita som ett JavaScript-objekt istället för en array möjliggör bättre anpassning av varje rekvisita. Genom att definiera rekvisita som ett objekt i en komponent kan du ange varje rekvisitas förväntade datatyp och standardvärde.
Dessutom kan du markera specifika rekvisita efter behov, vilket utlöser en varning om stödet inte tillhandahålls när komponenten används. Att definiera rekvisita som ett objekt ger flera fördelar jämfört med att definiera rekvisita som en array, inklusive:
- Att definiera den förväntade datatypen och standardvärdet för varje rekvisita gör det lättare för dig och ditt utvecklarteam att förstå exakt hur komponenten ska användas.
- Genom att markera rekvisita efter behov kan du fånga fel tidigt i utvecklingsprocessen och ge mer information till utvecklarteamet.
Här är ett exempel på hur man definierar rekvisita som ett objekt i en Vue.js-komponent:
<mall>
<div>
<h1>{{ title }}h1>
<sid>{{ meddelande }}sid>
<sid>{{ e-postadress }}sid>
div>
mall>
<manus>
export standard {
namn: "ChildComponent",
rekvisita: {
titel: {
typ: String,
default: "Standardtitel",
},
meddelande: {
typ: String,
default: "Standardmeddelande",
},
e-postadress: {
typ: String,
krävs: sant,
},
},
};
manus>
Detta kodblock är ett exempel på en Vue.js-komponent som använder rekvisita för att skicka data från en överordnad komponent till en underordnad komponent. Kodblocket definierar dessa rekvisita som objekt med en typ och ett standardvärde eller en obligatorisk flagga.
Kodblocket definierar titel och meddelande rekvisita som strängar med en standard värde och e-postadress prop som en nödvändig sträng.
Välj den bästa metoden som passar din Vue-app
Du har lärt dig att definiera rekvisita både som array och objekt. Dina preferenser bör passa de specifika behoven för din app.
Vue visar sig vara ett mycket flexibelt JavaScript-ramverk. Det erbjuder många metoder och alternativ för att uppnå samma mål med olika fördelar för alla alternativen eller metoderna du väljer att arbeta med.