Met de rekwisieten van Vue kunt u aangepaste attributen op een component registreren. Ontdek precies hoe u ze kunt gebruiken.
Een van de belangrijkste kenmerken van Vue is de modulaire architectuur, waarmee u webapps kunt bouwen door kleine, herbruikbare componenten te combineren. Hierdoor kunt u uw webapp eenvoudig updaten en onderhouden.
Elke component in Vue kan zijn eigen set gegevens en methoden hebben, die u met rekwisieten kunt doorgeven aan de onderliggende componenten. Hier leert u hoe u rekwisieten in Vue kunt gebruiken om gegevens van bovenliggende naar onderliggende componenten door te geven.
Wat zijn rekwisieten in Vue?
Props - een afkorting van "properties" - zijn aangepaste attributen in Vue die een oudercomponent kan doorgeven aan zijn onderliggende componenten.
In Vue geven bovenliggende componenten rekwisieten door aan onderliggende componenten in een unidirectionele stroom. Dit betekent dat onderliggende componenten deze goedgekeurde rekwisieten alleen kunnen lezen en gebruiken, maar de gegevens niet kunnen wijzigen.
Door rekwisieten te gebruiken, kunt u herbruikbare componenten maken die u in uw hele toepassing kunt toepassen. Rekwisieten besparen u tijd en moeite, omdat u componenten kunt hergebruiken in plaats van helemaal nieuwe componenten te maken.
Props doorgeven in Vue
Het passeren van rekwisieten in Vue is eenvoudig en anders dan de manier waarop u passeert rekwisieten in Reageren. Gebruik de optie Props in het script van de onderliggende component om een prop van een bovenliggende component door te geven aan zijn onderliggende component in Vue.
Hier is een voorbeeld:
De kindercomponent
<sjabloon>
<div>
<h1>{{ titel }}h1>
<P>{{ bericht }}P>
<P>{{ e-mailadres }}P>
div>
sjabloon>
<script>
export standaard {
naam: "Kindercomponent",
rekwisieten: ["titel", "bericht", "e-mailadres"],
};
script>
Het bovenstaande codeblok beschrijft een Vue-kindcomponent die rekwisieten gebruikt om gegevens van een oudercomponent door te geven. De component bevat drie HTML-elementen die de titel, bericht, En e-mailadres eigenschappen met interpolatie.
De rekwisieten optie in de onderliggende component neemt een reeks eigenschappen in zich op. Deze array definieert de eigenschappen die de onderliggende component accepteert van de bovenliggende component.
Hier is een voorbeeld van een Vue-oudercomponent waarmee gegevens worden doorgegeven aan de onderliggende component rekwisieten:
bovenliggende component
<sjabloon>
<div>
<kind-component
titel="Hallo wereld"
message="Dit is een bericht van de bovenliggende component"
emailAddress="[email protected]"
/>
div>
sjabloon><script>
importeer ChildComponent uit "./components/ChildComponent.vue";
export standaard {
naam: "OuderComponent",
componenten: {
Kindcomponent,
},
};
script>
De bovenliggende component in het bovenstaande codeblok geeft drie rekwisieten door aan de onderliggende component. Het codeblok geeft statische waarden door aan de titel, bericht, En e-mailadres rekwisieten.
Je kunt ook dynamische waarden doorgeven aan je rekwisieten met de v-binden richtlijn. v-binden is een richtlijn gebruikt in Vue om gegevens te binden naar HTML-attributen.
Hier is een voorbeeld van de Vue-oudercomponent die gebruikmaakt van de v-binden richtlijn om dynamische waarden door te geven aan de rekwisieten:
bovenliggende component
<sjabloon>
<div>
<kind-component
:titel= "titel"
:bericht= "bericht"
:emailAddress= "emailAdres"
/>
div>
sjabloon><script>
importeer ChildComponent uit "./components/ChildComponent.vue";
export standaard {
naam: "OuderComponent",
componenten: {
Kindcomponent,
},
gegevens() {
opbrengst {
titel: "Welkom schat",
bericht: "Hoe gaat het",
e-mailadres: "[email protected]",
};
},
};
script>
De... gebruiken v-binden richtlijn om gegevens door te geven aan de onderliggende component, kunt u de waarden van de rekwisieten bijwerken op basis van de status van de bovenliggende component. Bijvoorbeeld door het wijzigen van de titel data-eigenschap in de bovenliggende component, de titel prop doorgegeven aan de onderliggende component zal ook worden bijgewerkt.
Deze methode om rekwisieten te definiëren als een reeks tekenreeksen is een verkort patroon. Elk van de strings in de array vertegenwoordigt een prop. Deze methode is ideaal wanneer alle rekwisieten in de reeks hetzelfde hebben JavaScript-gegevenstype.
Rekwisieten definiëren als een object in Vue
Door rekwisieten te definiëren als een JavaScript-object in plaats van een array, kan elk rekwisiet beter worden aangepast. Door rekwisieten als een object in een component te definiëren, kunt u het verwachte gegevenstype en de standaardwaarde van elk rekwisiet specificeren.
Bovendien kunt u specifieke rekwisieten markeren als vereist, waardoor een waarschuwing wordt geactiveerd als de rekwisiet niet wordt geleverd wanneer het onderdeel in gebruik is. Het definiëren van rekwisieten als een object biedt verschillende voordelen ten opzichte van het definiëren van rekwisieten als een array, waaronder:
- Door het verwachte gegevenstype en de standaardwaarde voor elke prop te definiëren, kunnen u en uw ontwikkelaarsteam gemakkelijker begrijpen hoe de component precies moet worden gebruikt.
- Door rekwisieten als vereist te markeren, kunt u fouten vroeg in het ontwikkelingsproces opsporen en meer informatie aan het ontwikkelteam verstrekken.
Hier is een voorbeeld van het definiëren van rekwisieten als een object in een Vue.js-component:
<sjabloon>
<div>
<h1>{{ titel }}h1>
<P>{{ bericht }}P>
<P>{{ e-mailadres }}P>
div>
sjabloon>
<script>
export standaard {
naam: "Kindercomponent",
rekwisieten: {
titel: {
type: tekenreeks,
standaard: "Standaardtitel",
},
bericht: {
type: tekenreeks,
standaard: "Standaardbericht",
},
e-mailadres: {
type: tekenreeks,
vereist: waar,
},
},
};
script>
Dit codeblok is een voorbeeld van een Vue.js-component die rekwisieten gebruikt om gegevens van een bovenliggende component door te geven aan een onderliggende component. Het codeblok definieert deze rekwisieten als objecten met een type en standaardwaarde of een vereiste vlag.
Het codeblok definieert de titel En bericht rekwisieten als snaren met een standaard waarde en de e-mailadres prop als een vereist snaar.
Kies de beste methode die bij uw Vue-app past
Je hebt geleerd hoe je rekwisieten kunt definiëren als zowel een array als een object. Uw voorkeur moet passen bij de specifieke behoeften van uw app.
Vue bewijst zichzelf als een zeer flexibel JavaScript-framework. Het biedt veel methoden en opties om hetzelfde doel te bereiken met verschillende voordelen voor elk van de opties of methoden waarmee u wilt werken.