Kuidas kasutada rekvisiite paremate Vue komponentide loomiseks

Üks Vue põhifunktsioone on selle modulaarne arhitektuur, mis võimaldab teil luua veebirakendusi, kombineerides väikeseid korduvkasutatavaid komponente. See võimaldab teil oma veebirakendust hõlpsalt värskendada ja hooldada.

Igal Vue komponendil võib olla oma andmete ja meetodite kogum, mida saate rekvisiitide abil edasi anda selle alamkomponentidele. Siit saate teada, kuidas kasutada Vue rekvisiite, et edastada andmeid vanematelt komponentidele.

Mis on Vue rekvisiidid?

Rekvisiidid (lühend sõnadest "omadused") on Vue kohandatud atribuudid, mille ülemkomponent saab edasi anda oma alamkomponentidele.

Vue-s edastavad vanemkomponendid rekvisiidid alamkomponentidele ühesuunalise vooga. See tähendab, et alamkomponendid saavad ainult lugeda ja kasutada neid läbitud rekvisiite, kuid ei saa andmeid muuta.

Rekvisiitide kasutamine võimaldab teil luua korduvkasutatavaid komponente, mida saate kogu rakenduse vältel rakendada. Rekvisiidid säästavad teie aega ja vaeva, kuna saate komponente uuesti kasutada, mitte luua uusi komponente nullist.

Kuidas Vues rekvisiite edasi anda

Rekvisiitide läbimine Vues on lihtne ja erineb möödumisviisist rekvisiidid Reactis. Rekvisiidi edastamiseks ülemkomponendist selle Vue alamkomponendile kasutage alamkomponendi skriptis suvandit props.

Siin on näide:

 Lapskomponent 
<malli>
<div>
<h1>{{ pealkiri }}h1>
<lk>{{ sõnum }}lk>
<lk>{{ e-posti aadress }}lk>
div>
malli>
<stsenaarium>
ekspordi vaikimisi {
 nimi: "ChildComponent",
 rekvisiidid: ["pealkiri", "sõnum", "e-posti aadress"],
};
stsenaarium>

Ülaltoodud koodiplokk kirjeldab Vue alamkomponenti, mis kasutab lähtekomponendist andmete edastamiseks rekvisiite. Komponent sisaldab kolme HTML-i elementi, mis kuvavad pealkiri, sõnumja e-posti aadress omadused interpolatsiooniga.

The rekvisiidid alamkomponendi valik võtab atribuutide massiivi. See massiiv määratleb atribuudid, mida alamkomponent emakomponendilt vastu võtab.

Siin on näide Vue vanemkomponendist, mis edastab andmeid alamkomponendile rekvisiidid:

 vanemkomponent 
<malli>
<div>
<lapskomponent
 title="Tere maailm"
 message="See on sõnum vanemkomponendilt"
 emailAddress="[email protected]"
 />
div>
malli>
<stsenaarium>
importige ChildComponent saidist "./components/ChildComponent.vue";
ekspordi vaikimisi {
 nimi: "ParentComponent",
 komponendid: {
 ChildComponent,
 },
};
stsenaarium>

Ülaltoodud koodiploki vanemkomponent edastab kolm tugipunkti alamkomponendile. Koodiplokk edastab staatilised väärtused pealkiri, sõnumja e-posti aadress rekvisiidid.

Samuti saate dünaamilisi väärtusi oma rekvisiitidele edastada v-side direktiiv. v-side on direktiiv kasutatakse Vue's andmete sidumiseks HTML-i atribuutidele.

Siin on näide Vue vanemkomponendist, mis kasutab v-side käsk dünaamiliste väärtuste edastamiseks rekvisiitidele:

 vanemkomponent 
<malli>
<div>
<lapskomponent
 :title= "pealkiri"
 :message= "sõnum"
 :emailAddress= "e-posti aadress"
 />
div>
malli>
<stsenaarium>
importige ChildComponent saidist "./components/ChildComponent.vue";
ekspordi vaikimisi {
 nimi: "ParentComponent",
 komponendid: {
 ChildComponent,
 },
 andmed() {
 return {
 pealkiri: "Tere tulemast kallis",
 sõnum: "Kuidas läheb",
 e-posti aadress: "[email protected]",
 };
 },
};
stsenaarium>

Kasutades v-side käsk andmete edastamiseks alamkomponendile, saate värskendada rekvisiitide väärtusi põhikomponendi oleku alusel. Näiteks muutes pealkiri andmeatribuut vanemkomponendis pealkiri Samuti värskendatakse alamkomponendile edastatud propi.

See meetod rekvisiitide defineerimiseks stringide massiivina on stenogramm. Kõik massiivi stringid tähistavad rekvisiite. See meetod on ideaalne, kui kõigil massiivi rekvisiitidel on samad JavaScripti andmetüüp.

Rekvisiidide määratlemine Vue objektina

Rekvisiitide defineerimine JavaScripti objektina massiivi asemel võimaldab iga rekvisiidi paremini kohandada. Rekvisiitide määratlemine komponendi objektina võimaldab teil määrata iga rekvisiidi eeldatava andmetüübi ja vaikeväärtuse.

Lisaks saate märkida konkreetsed rekvisiidid vastavalt vajadusele, käivitades hoiatuse, kui tugi ei ole komponendi kasutamisel. Rekvisiitide määratlemine objektina pakub rekvisiitide massiivina määratlemise ees mitmeid eeliseid, sealhulgas:

1. Iga rekvisiidi jaoks eeldatava andmetüübi ja vaikeväärtuse määratlemine muudab teie ja teie arendajameeskonna jaoks lihtsamaks aru, kuidas komponenti täpselt kasutada.
2. Märgistades rekvisiidid vastavalt vajadusele, saate arendusprotsessi varajases staadiumis vead tuvastada ja arendajameeskonnale rohkem teavet anda.

Siin on näide, kuidas määratleda rekvisiidid objektina Vue.js komponendis.

<malli>
<div>
<h1>{{ pealkiri }}h1>
<lk>{{ sõnum }}lk>
<lk>{{ e-posti aadress }}lk>
div>
malli>
<stsenaarium>
ekspordi vaikimisi {
 nimi: "ChildComponent",
 rekvisiidid: {
 pealkiri: {
 tüüp: string,
 vaikimisi: "Vaikepealkiri",
 },
 sõnum: {
 tüüp: string,
 vaikimisi: "Vaikesõnum",
 },
 e-posti aadress: {
 tüüp: string,
 nõutav: tõsi,
 },
 },
};
stsenaarium>

See koodiplokk on näide Vue.js komponendist, mis kasutab rekvisiite, et edastada andmeid ülemkomponendist alamkomponendile. Koodiplokk määratleb need rekvisiidid objektidena, millel on tüüp ja vaikeväärtus või nõutav lipp.

Koodiplokk määratleb pealkiri ja sõnum rekvisiidid stringidena koos a vaikimisi väärtus ja e-posti aadress prop as a nõutud string.

Valige parim meetod, mis sobib teie Vue rakendusega

Olete õppinud, kuidas määratleda rekvisiite nii massiivi kui ka objektina. Teie eelistus peaks vastama teie rakenduse konkreetsetele vajadustele.

Vue tõestab end väga paindliku JavaScripti raamistikuna. See pakub palju meetodeid ja valikuid sama eesmärgi saavutamiseks koos erinevate eelistega mis tahes valiku või meetodi puhul, millega otsustate töötada.