Sådan bruger du rekvisitter til at skabe bedre Vue-komponenter

En af nøglefunktionerne ved Vue er dens modulære arkitektur, som giver dig mulighed for at bygge webapps ved at kombinere små, genanvendelige komponenter. Dette giver dig mulighed for nemt at opdatere og vedligeholde din webapp.

Hver komponent i Vue kan have sit eget sæt af data og metoder, som du kan videregive til dens underordnede komponenter med rekvisitter. Her vil du lære, hvordan du bruger rekvisitter i Vue til at videregive data fra overordnede til underordnede komponenter.

Hvad er rekvisitter i Vue?

Rekvisitter – en forkortelse for "egenskaber" – er brugerdefinerede attributter i Vue, som en overordnet komponent kan videregive til sine underordnede komponenter.

I Vue sender overordnede komponenter rekvisitter til underordnede komponenter i et ensrettet flow. Dette betyder, at underordnede komponenter kun kan læse og bruge disse beståede rekvisitter, men ikke kan ændre dataene.

Brug af rekvisitter giver dig mulighed for at skabe genanvendelige komponenter, som du kan anvende i hele din applikation. Rekvisitter sparer dig for tid og kræfter, da du kan genbruge komponenter i stedet for at oprette nye komponenter fra bunden.

Sådan passerer du rekvisitter i Vue

At bestå rekvisitter i Vue er enkelt og anderledes end den måde, du passerer rekvisitter i React. For at overføre en rekvisit fra en overordnet komponent til dens underordnede komponent i Vue, skal du bruge muligheden for rekvisitter i den underordnede komponents script.

Her er et eksempel:

 Barnekomponenten 
<skabelon>
<div>
<h1>{{ titel }}h1>
<s>{{ besked }}s>
<s>{{ email adresse }}s>
div>
skabelon>
<manuskript>
eksport standard {
 navn: "ChildComponent",
 rekvisitter: ["titel", "besked", "e-mailadresse"],
};
manuskript>

Ovenstående kodeblok beskriver en Vue underordnet komponent, der bruger rekvisitter til at videregive data fra en overordnet komponent. Komponenten indeholder tre HTML-elementer, der viser titel, besked, og email adresse egenskaber med interpolation.

Det rekvisitter mulighed i den underordnede komponent tager en række egenskaber ind. Dette array definerer de egenskaber, som den underordnede komponent accepterer fra den overordnede komponent.

Her er et eksempel på en Vue-overordnet komponent, der sender data til den underordnede komponent med rekvisitter:

 overordnet komponent 
<skabelon>
<div>
<barn-komponent
 title="Hej verden"
 message="Dette er en besked fra den overordnede komponent"
 emailAddress="[email protected]"
 />
div>
skabelon>
<manuskript>
importer ChildComponent fra "./components/ChildComponent.vue";
eksport standard {
 navn: "ParentComponent",
 komponenter: {
 ChildComponent,
 },
};
manuskript>

Den overordnede komponent i ovenstående kodeblok sender tre rekvisitter til den underordnede komponent. Kodeblokken sender statiske værdier til titel, besked, og email adresse rekvisitter.

Du kan også videregive dynamiske værdier til dine rekvisitter med v-bind direktiv. v-bind er et direktiv bruges i Vue til at binde data til HTML-attributter.

Her er et eksempel på Vue-forælderkomponenten, der bruger v-bind direktiv om at overføre dynamiske værdier til rekvisitterne:

 overordnet komponent 
<skabelon>
<div>
<barn-komponent
 :title= "titel"
 :message= "besked"
 :emailAddress= "emailAddress"
 />
div>
skabelon>
<manuskript>
importer ChildComponent fra "./components/ChildComponent.vue";
eksport standard {
 navn: "ParentComponent",
 komponenter: {
 ChildComponent,
 },
 data() {
 Vend tilbage {
 titel: "Velkommen kære",
 besked: "Hvordan har du det",
 e-mailadresse: "[email protected]",
 };
 },
};
manuskript>

Bruger v-bind direktiv til at videregive data til den underordnede komponent, kan du opdatere rekvisitternes værdier baseret på den overordnede komponents tilstand. For eksempel ved at ændre titel dataegenskab i den overordnede komponent, den titel prop, der er videregivet til den underordnede komponent, vil også blive opdateret.

Denne metode til at definere rekvisitter som en række strenge er et stenografimønster. Hver af strengene i arrayet repræsenterer en rekvisit. Denne metode er ideel, når alle rekvisitter i arrayet har det samme JavaScript-datatype.

Definition af rekvisitter som et objekt i Vue

At definere rekvisitter som et JavaScript-objekt i stedet for et array giver mulighed for bedre tilpasning af hver rekvisit. Hvis du definerer rekvisitter som et objekt i en komponent, kan du angive hver rekvisit forventede datatype og standardværdi.

Derudover kan du markere specifikke rekvisitter efter behov, hvilket udløser en advarsel, hvis støtten ikke leveres, når komponenten er i brug. At definere rekvisitter som et objekt giver flere fordele i forhold til at definere rekvisitter som et array, herunder:

1. At definere den forventede datatype og standardværdien for hver rekvisit gør det nemmere for dig og dit udviklerteam at forstå, hvordan komponenten præcist skal bruges.
2. Ved at markere rekvisitter efter behov, kan du fange fejl tidligt i udviklingsprocessen og give mere information til udviklerteamet.

Her er et eksempel på, hvordan man definerer rekvisitter som et objekt i en Vue.js-komponent:

<skabelon>
<div>
<h1>{{ titel }}h1>
<s>{{ besked }}s>
<s>{{ email adresse }}s>
div>
skabelon>
<manuskript>
eksport standard {
 navn: "ChildComponent",
 rekvisitter: {
 titel: {
 type: streng,
 default: "Standard titel",
 },
 besked: {
 type: streng,
 default: "Standardmeddelelse",
 },
 email adresse: {
 type: streng,
 påkrævet: sandt,
 },
 },
};
manuskript>

Denne kodeblok er et eksempel på en Vue.js-komponent, der bruger rekvisitter til at overføre data fra en overordnet komponent til en underordnet komponent. Kodeblokken definerer disse rekvisitter som objekter med en type og standardværdi eller et påkrævet flag.

Kodeblokken definerer titel og besked rekvisitter som strenge med en Standard værdi og email adresse rekvisit som en påkrævet snor.

Vælg den bedste metode, der passer til din Vue-app

Du har lært at definere rekvisitter både som et array og som objekt. Dine præferencer bør passe til de specifikke behov for din app.

Vue beviser sig selv som en meget fleksibel JavaScript-ramme. Det giver en masse metoder og muligheder for at opnå det samme mål med forskellige fordele for enhver af de muligheder eller metoder, du vælger at arbejde med.