Vues rekvisitter lar deg registrere tilpassede attributter på en komponent. Finn ut nøyaktig hvordan du bruker dem.
En av nøkkelfunksjonene til Vue er dens modulære arkitektur, som lar deg bygge nettapper ved å kombinere små, gjenbrukbare komponenter. Dette lar deg enkelt oppdatere og vedlikeholde nettappen din.
Hver komponent i Vue kan ha sitt eget sett med data og metoder, som du kan overføre til underordnede komponenter med rekvisitter. Her vil du lære hvordan du bruker rekvisitter i Vue for å overføre data fra overordnede til underordnede komponenter.
Hva er rekvisitter i Vue?
Rekvisitter – forkortelse for "egenskaper" – er tilpassede attributter i Vue som en overordnet komponent kan overføre til sine underordnede komponenter.
I Vue sender overordnede komponenter rekvisitter til underordnede komponenter i en ensrettet flyt. Dette betyr at underordnede komponenter bare kan lese og bruke disse beståtte rekvisittene, men ikke kan endre dataene.
Ved å bruke rekvisitter kan du lage gjenbrukbare komponenter som du kan bruke gjennom hele applikasjonen. Rekvisitter sparer deg for tid og krefter, siden du kan gjenbruke komponenter i stedet for å lage nye komponenter fra bunnen av.
Slik passerer du rekvisitter i Vue
Å passere rekvisitter i Vue er enkelt og annerledes enn måten du passerer rekvisitter i React. For å overføre en rekvisitt fra en overordnet komponent til dens underordnede komponent i Vue, bruk rekvisittalternativet i den underordnede komponentens skript.
Her er et eksempel:
Barnekomponenten
<mal>
<div>
<h1>{{ tittel }}h1>
<s>{{ beskjed }}s>
<s>{{ epostadresse }}s>
div>
mal>
<manus>
eksport standard {
navn: "ChildComponent",
rekvisitter: ["tittel", "melding", "e-postadresse"],
};
manus>
Kodeblokken ovenfor beskriver en Vue underordnet komponent som bruker rekvisitter for å sende data fra en overordnet komponent. Komponenten inkluderer tre HTML-elementer som viser tittel, beskjed, og epostadresse egenskaper med interpolasjon.
De Rekvisitter alternativet i den underordnede komponenten tar inn en rekke egenskaper. Denne matrisen definerer egenskapene den underordnede komponenten godtar fra den overordnede komponenten.
Her er et eksempel på en Vue-overordnet komponent som sender data til den underordnede komponenten med Rekvisitter:
overordnet komponent
<mal>
<div>
<barnekomponent
title="Hei verden"
message="Dette er en melding fra den overordnede komponenten"
emailAddress="[email protected]"
/>
div>
mal><manus>
importer ChildComponent fra "./components/ChildComponent.vue";
eksport standard {
navn: "ParentComponent",
komponenter: {
ChildComponent,
},
};
manus>
Den overordnede komponenten i kodeblokken ovenfor sender tre rekvisitter til den underordnede komponenten. Kodeblokken sender statiske verdier til tittel, beskjed, og epostadresse Rekvisitter.
Du kan også sende dynamiske verdier til rekvisittene dine med v-bind direktiv. v-bind er et direktiv brukes i Vue for å binde data til HTML-attributter.
Her er et eksempel på Vue-foreldrekomponenten som bruker v-bind direktiv for å overføre dynamiske verdier til rekvisittene:
overordnet komponent
<mal>
<div>
<barnekomponent
:title= "tittel"
:melding= "melding"
:emailAddress= "emailAddress"
/>
div>
mal><manus>
importer ChildComponent fra "./components/ChildComponent.vue";
eksport standard {
navn: "ParentComponent",
komponenter: {
ChildComponent,
},
data() {
komme tilbake {
tittel: "Velkommen kjære",
melding: "Hvordan har du det",
e-postadresse: "[email protected]",
};
},
};
manus>
Bruker v-bind direktiv for å sende data til den underordnede komponenten, kan du oppdatere rekvisittens verdier basert på den overordnede komponentens tilstand. For eksempel ved å endre tittel data-egenskapen i den overordnede komponenten, den tittel prop som sendes til underordnet komponent vil også bli oppdatert.
Denne metoden for å definere rekvisitter som en rekke strenger er et stenografimønster. Hver av strengene i matrisen representerer en rekvisitt. Denne metoden er ideell når alle rekvisitter i matrisen har det samme JavaScript-datatype.
Definere rekvisitter som et objekt i Vue
Å definere rekvisitter som et JavaScript-objekt i stedet for en matrise gir bedre tilpasning av hver rekvisitt. Å definere rekvisitter som et objekt i en komponent vil gjøre deg i stand til å spesifisere hver rekvisitts forventede datatype og standardverdi.
I tillegg kan du merke spesifikke rekvisitter etter behov, og utløse en advarsel hvis rekvisitten ikke følger med når komponenten er i bruk. Å definere rekvisitter som et objekt gir flere fordeler fremfor å definere rekvisitter som en matrise, inkludert:
- Å definere den forventede datatypen og standardverdien for hver rekvisitt gjør det lettere for deg og utviklerteamet ditt å forstå nøyaktig hvordan komponenten skal brukes.
- Ved å merke rekvisitter etter behov, kan du fange opp feil tidlig i utviklingsprosessen og gi mer informasjon til utviklerteamet.
Her er et eksempel på hvordan du definerer rekvisitter som et objekt i en Vue.js-komponent:
<mal>
<div>
<h1>{{ tittel }}h1>
<s>{{ beskjed }}s>
<s>{{ epostadresse }}s>
div>
mal>
<manus>
eksport standard {
navn: "ChildComponent",
Rekvisitter: {
tittel: {
type: streng,
default: "Standardtittel",
},
beskjed: {
type: streng,
default: "Standardmelding",
},
epostadresse: {
type: streng,
påkrevd: sant,
},
},
};
manus>
Denne kodeblokken er et eksempel på en Vue.js-komponent som bruker rekvisitter for å overføre data fra en overordnet komponent til en underordnet komponent. Kodeblokken definerer disse rekvisittene som objekter med en type og standardverdi eller et påkrevd flagg.
Kodeblokken definerer tittel og beskjed rekvisitter som strenger med en misligholde verdi og epostadresse rekvisitt som en nødvendig streng.
Velg den beste metoden som passer din Vue-app
Du har lært hvordan du definerer rekvisitter både som en matrise og objekt. Dine preferanser bør passe de spesifikke behovene til appen din.
Vue beviser seg selv som et veldig fleksibelt JavaScript-rammeverk. Den tilbyr mange metoder og alternativer for å oppnå det samme målet med forskjellige fordeler for alle alternativene eller metodene du velger å jobbe med.
