Kā izmantot rekvizītus, lai izveidotu labākus Vue komponentus

Viena no galvenajām Vue iezīmēm ir tās modulārā arhitektūra, kas ļauj izveidot tīmekļa lietotnes, apvienojot mazus, atkārtoti lietojamus komponentus. Tas ļauj ērti atjaunināt un uzturēt savu tīmekļa lietotni.

Katram Vue komponentam var būt savs datu un metožu kopums, ko varat nodot tā pakārtotajiem komponentiem, izmantojot rekvizītus. Šeit jūs uzzināsit, kā Vue izmantot rekvizītus, lai pārsūtītu datus no vecākiem uz bērna komponentiem.

Kas ir rekvizīti Vue?

Rekvizīti — saīsinājums no “īpašībām” — ir Vue pielāgoti atribūti, kurus vecākkomponents var nodot saviem pakārtotajiem komponentiem.

Programmā Vue vecākkomponenti nodod rekvizītus pakārtotajiem komponentiem vienvirziena plūsmā. Tas nozīmē, ka bērnu komponenti var tikai lasīt un izmantot šos apstiprinātos rekvizītus, bet nevar mainīt datus.

Izmantojot rekvizītus, varat izveidot atkārtoti lietojamus komponentus, kurus varat lietot visā lietojumprogrammā. Rekvizīti ietaupa jūsu laiku un pūles, jo varat atkārtoti izmantot komponentus, nevis izveidot jaunus komponentus no jauna.

Kā nodot rekvizītus Vue

Rekvizītu nodošana Vue ir vienkārša un atšķiras no tā, kā jūs garām rekvizīti programmā React. Lai pārsūtītu rekvizītu no vecākkomponenta uz tā pakārtoto komponentu Vue, izmantojiet rekvizītu opciju pakārtotā komponenta skriptā.

Šeit ir piemērs:

 Bērna sastāvdaļa 
<veidne>
<div>
<h1>{{nosaukums }}h1>
<lpp>{{ ziņa }}lpp>
<lpp>{{ epasta adrese }}lpp>
div>
veidne>
<skripts>
eksportēt noklusējuma {
 nosaukums: "ChildComponent",
 rekvizīti: ["nosaukums", "ziņa", "e-pasta adrese"],
};
skripts>

Iepriekš minētais koda bloks apraksta Vue pakārtoto komponentu, kas izmanto rekvizītus, lai pārsūtītu datus no vecākkomponenta. Komponents ietver trīs HTML elementus, kas parāda virsraksts, ziņa, un epasta adrese īpašības ar interpolāciju.

The rekvizīti opcija bērna komponentā uzņem rekvizītu masīvu. Šis masīvs nosaka rekvizītus, ko pakārtotais komponents pieņem no vecākkomponenta.

Šeit ir Vue vecākkomponenta piemērs, kas nodod datus pakārtotajam komponentam ar rekvizīti:

 vecāku komponents 
<veidne>
<div>
<bērnu sastāvdaļa
 title = "Sveika pasaule"
 message="Šis ir ziņojums no vecākkomponenta"
 emailAddress="lietotā[email protected]"
 />
div>
veidne>
<skripts>
importēt ChildComponent no "./components/ChildComponent.vue";
eksportēt noklusējuma {
 nosaukums: "ParentComponent",
 sastāvdaļas: {
 ChildComponent,
 },
};
skripts>

Iepriekšminētā koda bloka vecākais komponents nodod trīs palīgkomponentus pakārtotajam komponentam. Koda bloks nodod statiskās vērtības uz virsraksts, ziņa, un epasta adrese rekvizīti.

Varat arī nodot dinamiskās vērtības saviem rekvizītiem, izmantojot v-saiste direktīva. v-saiste ir direktīva izmanto Vue datu saistīšanai uz HTML atribūtiem.

Šeit ir Vue vecākkomponenta piemērs, kas izmanto v-saiste direktīva, lai dinamiskās vērtības nodotu balstiem:

 vecāku komponents 
<veidne>
<div>
<bērnu sastāvdaļa
 :title= "nosaukums"
 :message= "ziņa"
 :emailAddress= "e-pasta adrese"
 />
div>
veidne>
<skripts>
importēt ChildComponent no "./components/ChildComponent.vue";
eksportēt noklusējuma {
 nosaukums: "ParentComponent",
 sastāvdaļas: {
 ChildComponent,
 },
 dati() {
 return {
 nosaukums: "Sveicināts, dārgais",
 ziņa: "Kā tev klājas",
 e-pasta adrese: "lietotā[email protected]",
 };
 },
};
skripts>

Izmantojot v-saiste direktīvu, lai nodotu datus pakārtotajam komponentam, varat atjaunināt rekvizītu vērtības, pamatojoties uz vecākkomponenta stāvokli. Piemēram, mainot virsraksts datu rekvizīts vecākkomponentā, the virsraksts rekvizīts, kas nodots bērna komponentam, arī tiks atjaunināts.

Šī metode, kā definēt rekvizītus kā virkņu masīvu, ir stenogrāfija. Katra no masīva virknēm apzīmē rekvizītu. Šī metode ir ideāla, ja visiem masīva rekvizītiem ir vienādi JavaScript datu tips.

Rekvizītu definēšana kā objektu Vue

Rekvizītu definēšana kā JavaScript objektu, nevis masīvu, ļauj labāk pielāgot katru rekvizītu. Definējot rekvizītus kā objektu komponentā, varēsiet norādīt katra rekvizīta paredzamo datu tipu un noklusējuma vērtību.

Turklāt jūs varat atzīmēt konkrētus balstus pēc vajadzības, izraisot brīdinājumu, ja balsts netiek nodrošināts, kad komponents tiek lietots. Rekvizītu definēšana kā objektu sniedz vairākas priekšrocības salīdzinājumā ar rekvizītu definēšanu kā masīvu, tostarp:

1. Nosakot paredzamo datu tipu un noklusējuma vērtību katram rekvizītam, jums un jūsu izstrādātāju komandai ir vieglāk saprast, kā tieši izmantot komponentu.
2. Atzīmējot rekvizītus pēc nepieciešamības, varat atklāt kļūdas izstrādes procesa sākumā un sniegt plašāku informāciju izstrādātāju komandai.

Šeit ir piemērs, kā definēt rekvizītus kā objektu Vue.js komponentā:

<veidne>
<div>
<h1>{{nosaukums }}h1>
<lpp>{{ ziņa }}lpp>
<lpp>{{ epasta adrese }}lpp>
div>
veidne>
<skripts>
eksportēt noklusējuma {
 nosaukums: "ChildComponent",
 rekvizīti: {
 virsraksts: {
 tips: virkne,
 noklusējuma: "Noklusējuma nosaukums",
 },
 ziņa: {
 tips: virkne,
 noklusējuma: "Noklusējuma ziņojums",
 },
 epasta adrese: {
 tips: virkne,
 nepieciešams: patiess,
 },
 },
};
skripts>

Šis koda bloks ir Vue.js komponenta piemērs, kas izmanto rekvizītus, lai pārsūtītu datus no vecākkomponenta uz pakārtoto komponentu. Koda bloks definē šos rekvizītus kā objektus ar tipu un noklusējuma vērtību vai nepieciešamo karogu.

Koda bloks nosaka virsraksts un ziņa butaforijas kā stīgas ar a noklusējuma vērtība un epasta adrese prop kā a nepieciešams virkne.

Izvēlieties savai Vue lietotnei piemērotāko metodi

Jūs esat iemācījušies definēt rekvizītus gan kā masīvu, gan objektu. Jūsu izvēlei ir jāatbilst jūsu lietotnes īpašajām vajadzībām.

Vue sevi pierāda kā ļoti elastīgu JavaScript ietvaru. Tā piedāvā daudzas metodes un iespējas, lai sasniegtu vienu un to pašu mērķi ar dažādām priekšrocībām jebkurai no iespējām vai metodēm, ar kurām izvēlaties strādāt.