Rekviziti Vue vam omogočajo registracijo atributov po meri na komponenti. Ugotovite, kako natančno jih uporabiti.
Ena od ključnih značilnosti Vue je njegova modularna arhitektura, ki vam omogoča izdelavo spletnih aplikacij s kombiniranjem majhnih komponent za večkratno uporabo. To vam omogoča enostavno posodabljanje in vzdrževanje spletne aplikacije.
Vsaka komponenta v Vue ima lahko svoj niz podatkov in metod, ki jih lahko prenesete na njene podrejene komponente z rekviziti. Tukaj se boste naučili, kako uporabiti pripomočke v Vue za prenos podatkov od nadrejenih do podrejenih komponent.
Kaj so rekviziti v Vue?
Rekviziti - okrajšava za "lastnosti" - so atributi po meri v Vue, ki jih lahko nadrejena komponenta prenese na svoje podrejene komponente.
V Vue nadrejene komponente posredujejo rekvizite podrejenim komponentam v enosmernem toku. To pomeni, da lahko podrejene komponente samo berejo in uporabljajo te posredovane rekvizite, ne morejo pa spreminjati podatkov.
Uporaba rekvizitov vam omogoča ustvarjanje komponent za večkratno uporabo, ki jih lahko uporabite v svoji aplikaciji. Rekviziti vam prihranijo čas in trud, saj lahko znova uporabite komponente, namesto da ustvarite nove komponente iz nič.
Kako prenesti rekvizite v Vue
Podajanje rekvizitov v Vue je preprosto in drugačno od načina podajanja rekviziti v Reactu. Če želite prenesti prop iz nadrejene komponente v njeno podrejeno komponento v Vue, uporabite možnost props v skriptu podrejene komponente.
Tukaj je primer:
Otroška komponenta
<predlogo>
<div>
<h1>{{ naslov }}h1>
<str>{{ sporočilo }}str>
<str>{{ email naslov }}str>
div>
predlogo>
<scenarij>
izvoz privzeto {
ime: "ChildComponent",
props: ["title", "message", "emailAddress"],
};
scenarij>
Zgornji blok kode opisuje podrejeno komponento Vue, ki uporablja pripomočke za posredovanje podatkov iz nadrejene komponente. Komponenta vključuje tri elemente HTML, ki prikazujejo naslov, sporočilo, in email naslov lastnosti z interpolacijo.
The rekviziti možnost v podrejeni komponenti sprejme niz lastnosti. Ta matrika definira lastnosti, ki jih podrejena komponenta sprejme od nadrejene komponente.
Tukaj je primer nadrejene komponente Vue, ki posreduje podatke podrejeni komponenti s rekviziti:
nadrejena komponenta
<predlogo>
<div>
<otroška komponenta
title="Pozdravljen svet"
message="To je sporočilo nadrejene komponente"
emailAddress="[email protected]"
/>
div>
predlogo><scenarij>
uvoz ChildComponent iz "./components/ChildComponent.vue";
izvoz privzeto {
ime: "ParentComponent",
komponente: {
ChildComponent,
},
};
scenarij>
Nadrejena komponenta v zgornjem bloku kode posreduje tri rekvizite podrejeni komponenti. Blok kode posreduje statične vrednosti v naslov, sporočilo, in email naslov rekviziti.
Svojim rekvizitom lahko posredujete tudi dinamične vrednosti z v-vezava direktiva. v-vezava je direktiva uporablja se v Vue za vezavo podatkov na atribute HTML.
Tukaj je primer nadrejene komponente Vue, ki uporablja v-vezava direktiva za posredovanje dinamičnih vrednosti rekvizitom:
nadrejena komponenta
<predlogo>
<div>
<otroška komponenta
:title= "naslov"
:message= "sporočilo"
:emailAddress= "emailAddress"
/>
div>
predlogo><scenarij>
uvoz ChildComponent iz "./components/ChildComponent.vue";
izvoz privzeto {
ime: "ParentComponent",
komponente: {
ChildComponent,
},
podatki() {
return {
Naslov: "Dobrodošla draga",
sporočilo: "Kako si",
elektronski naslov: "[email protected]",
};
},
};
scenarij>
Uporabljati v-vezava za posredovanje podatkov podrejeni komponenti, lahko posodobite vrednosti rekvizitov glede na stanje nadrejene komponente. Na primer s spremembo naslov lastnost podatkov v nadrejeni komponenti, the naslov posodobljen bo tudi prop, posredovan podrejeni komponenti.
Ta metoda definiranja rekvizitov kot niza nizov je skrajšan vzorec. Vsak od nizov v matriki predstavlja prop. Ta metoda je idealna, če imajo vsi rekviziti v nizu enake podatkovni tip JavaScript.
Definiranje rekvizitov kot predmeta v Vue
Definiranje rekvizitov kot predmeta JavaScript namesto matrike omogoča boljšo prilagoditev vsakega rekvizita. Definiranje rekvizitov kot predmeta v komponenti vam bo omogočilo, da določite pričakovani podatkovni tip in privzeto vrednost vsakega rekvizita.
Poleg tega lahko po potrebi označite določene pripomočke, kar sproži opozorilo, če rekvizit ni na voljo, ko je komponenta v uporabi. Definiranje rekvizitov kot predmeta ponuja več prednosti pred definiranjem rekvizitov kot niza, vključno z:
- Če določite pričakovani tip podatkov in privzeto vrednost za vsak prop, boste vi in vaša skupina razvijalcev lažje razumeli, kako natančno uporabiti komponento.
- Z označevanjem rekvizitov, kot je zahtevano, lahko ujamete napake zgodaj v razvojnem procesu in ekipi razvijalcev zagotovite več informacij.
Tukaj je primer, kako definirati rekvizite kot objekt v komponenti Vue.js:
<predlogo>
<div>
<h1>{{ naslov }}h1>
<str>{{ sporočilo }}str>
<str>{{ email naslov }}str>
div>
predlogo>
<scenarij>
izvoz privzeto {
ime: "ChildComponent",
rekviziti: {
naslov: {
vrsta: niz,
privzeto: "Privzeti naslov",
},
sporočilo: {
vrsta: niz,
privzeto: "Privzeto sporočilo",
},
email naslov: {
vrsta: niz,
obvezno: res,
},
},
};
scenarij>
Ta blok kode je primer komponente Vue.js, ki uporablja rekvizite za posredovanje podatkov iz nadrejene komponente v podrejeno komponento. Blok kode definira te rekvizite kot objekte s tipom in privzeto vrednostjo ali zahtevano zastavico.
Blok kode definira naslov in sporočilo rekviziti kot strune z a privzeto vrednost in email naslov rekvizit kot a potrebno vrvica.
Izberite najboljšo metodo, ki ustreza vaši aplikaciji Vue
Naučili ste se definirati rekvizite kot niz in objekt. Vaše nastavitve morajo ustrezati posebnim potrebam vaše aplikacije.
Vue se je izkazal kot zelo prilagodljiv okvir JavaScript. Ponuja veliko metod in možnosti za doseganje istega cilja z različnimi prednostmi za katero koli možnost ali metodo, s katero se odločite delati.
