„Vue“ rekvizitai leidžia užregistruoti pasirinktinius komponento atributus. Sužinokite, kaip tiksliai juos naudoti.
Viena iš pagrindinių „Vue“ savybių yra modulinė architektūra, leidžianti kurti žiniatinklio programas derinant mažus daugkartinio naudojimo komponentus. Tai leidžia lengvai atnaujinti ir prižiūrėti žiniatinklio programą.
Kiekvienas „Vue“ komponentas gali turėti savo duomenų ir metodų rinkinį, kurį galite perduoti antriniams komponentams naudodami rekvizitus. Čia sužinosite, kaip naudoti „Vue“ rekvizitus, kad perduotų duomenis iš tėvų į vaikus.
Kas yra „Vue“ rekvizitas?
Rekvizitai – „ypatybių“ trumpinys – yra pasirinktiniai „Vue“ atributai, kuriuos pagrindinis komponentas gali perduoti antriniams komponentams.
Vue pirminiai komponentai perduoda rekvizitus antriniams komponentams vienakrypčiu srautu. Tai reiškia, kad antriniai komponentai gali tik skaityti ir naudoti šiuos patvirtintus rekvizitus, bet negali keisti duomenų.
Naudodami rekvizitus galite sukurti daugkartinio naudojimo komponentus, kuriuos galite taikyti visoje programoje. Rekvizitai sutaupo jūsų laiko ir pastangų, nes galite pakartotinai naudoti komponentus, o ne kurti naujus komponentus nuo nulio.
Kaip perduoti rekvizitus Vue
Rekvizitas Vue yra paprastas ir skiriasi nuo to, kaip praleidžiate rekvizitai React. Norėdami perduoti rekvizitus iš pirminio komponento antriniam komponentui Vue, antrinio komponento scenarijuje naudokite parinktį rekvizitai.
Štai pavyzdys:
Vaikiškas komponentas
<šabloną>
<div>
<h1>{{ pavadinimas }}h1>
<p>{{ pranešimas }}p>
<p>{{ elektroninio pašto adresas }}p>
div>
šabloną>
<scenarijus>
eksportuoti numatytasis {
pavadinimas: "ChildComponent",
rekvizitai: ["pavadinimas", "pranešimas", "el. pašto adresas"],
};
scenarijus>
Aukščiau pateiktame kodo bloke aprašomas antrinis „Vue“ komponentas, naudojant rekvizitus duomenims iš pirminio komponento perduoti. Komponentą sudaro trys HTML elementai, kurie rodo titulą, žinutę, ir elektroninio pašto adresas savybės su interpoliacija.
The rekvizitai antrinio komponento parinktis įgauna daugybę savybių. Šis masyvas apibrėžia ypatybes, kurias antrinis komponentas priima iš pirminio komponento.
Štai Vue pirminio komponento, perduodančio duomenis antriniam komponentui, pavyzdys rekvizitai:
pirminis komponentas
<šabloną>
<div>
<vaiko komponentas
title="Sveikas pasaulis"
message="Tai pranešimas iš pirminio komponento"
emailAddress="[email protected]"
/>
div>
šabloną><scenarijus>
importuoti ChildComponent iš "./components/ChildComponent.vue";
eksportuoti numatytasis {
pavadinimas: "ParentComponent",
komponentai: {
Vaiko komponentas,
},
};
scenarijus>
Pirminis komponentas aukščiau pateiktame kodo bloke perduoda tris rekvizitus antriniam komponentui. Kodo blokas perduoda statines reikšmes į titulą, žinutę, ir elektroninio pašto adresas rekvizitai.
Taip pat galite perduoti dinamines reikšmes savo rekvizitų v-bind direktyva. v-bind yra direktyva naudojamas Vue duomenims susieti į HTML atributus.
Štai pavyzdys, kaip Vue pirminis komponentas naudoja v-bind direktyva perduoti dinamines reikšmes rekvizitų:
pirminis komponentas
<šabloną>
<div>
<vaiko komponentas
:title= "pavadinimas"
:message= "pranešimas"
:emailAddress= "emailAddress"
/>
div>
šabloną><scenarijus>
importuoti ChildComponent iš "./components/ChildComponent.vue";
eksportuoti numatytasis {
pavadinimas: "ParentComponent",
komponentai: {
Vaiko komponentas,
},
duomenys () {
return {
Pavadinimas: „Sveiki, brangieji“,
žinutė: „Kaip sekasi“,
pašto adresas: "[email protected]",
};
},
};
scenarijus>
Naudojant v-bind direktyvą perduoti duomenis antriniam komponentui, galite atnaujinti rekvizitų reikšmes pagal pirminio komponento būseną. Pavyzdžiui, pakeitus titulą duomenų ypatybė pirminiame komponente, the titulą rekvizitas, perduotas antriniam komponentui, taip pat bus atnaujintas.
Šis rekvizitų kaip eilučių masyvo apibrėžimo metodas yra stenografinis modelis. Kiekviena iš masyvo eilučių reiškia atramą. Šis metodas yra idealus, kai visi masyvo rekvizitai yra vienodi „JavaScript“ duomenų tipas.
Rekvizitų kaip objekto apibrėžimas Vue
Apibrėžiant rekvizitus kaip „JavaScript“ objektą, o ne masyvą, galima geriau pritaikyti kiekvieną rekvizitą. Apibrėžę rekvizitus kaip komponento objektą, galėsite nurodyti kiekvieno rekvizito numatomą duomenų tipą ir numatytąją reikšmę.
Be to, jei reikia, galite pažymėti konkrečius rekvizitus ir suaktyvinti įspėjimą, jei atrama nepateikiama, kai komponentas naudojamas. Apibrėžiant rekvizitus kaip objektą, yra keletas pranašumų, palyginti su rekvizitų kaip masyvo apibrėžimu, įskaitant:
- Apibrėžus numatomą duomenų tipą ir numatytąją kiekvieno rekvizito vertę, jums ir jūsų kūrėjų komandai lengviau suprasti, kaip tiksliai naudoti komponentą.
- Pažymėję rekvizitus, kaip reikia, galite pastebėti klaidas kūrimo proceso pradžioje ir pateikti daugiau informacijos kūrėjų komandai.
Štai pavyzdys, kaip apibrėžti rekvizitus kaip objektą Vue.js komponente:
<šabloną>
<div>
<h1>{{ pavadinimas }}h1>
<p>{{ pranešimas }}p>
<p>{{ elektroninio pašto adresas }}p>
div>
šabloną>
<scenarijus>
eksportuoti numatytasis {
pavadinimas: "ChildComponent",
rekvizitas: {
pavadinimas: {
tipas: styga,
numatytasis: „Numatytasis pavadinimas“,
},
žinutė: {
tipas: styga,
numatytasis: „Numatytasis pranešimas“,
},
elektroninio pašto adresas: {
tipas: styga,
būtina: tiesa,
},
},
};
scenarijus>
Šis kodo blokas yra Vue.js komponento, kuris naudoja rekvizitus duomenims iš pirminio komponento perduoti antriniam komponentui, pavyzdys. Kodo blokas apibrėžia šiuos rekvizitus kaip objektus, turinčius tipą ir numatytąją reikšmę arba reikiamą vėliavėlę.
Kodo blokas apibrėžia titulą ir žinutę rekvizitai kaip stygos su a numatytas vertė ir elektroninio pašto adresas rekvizitas kaip a reikalaujama styga.
Pasirinkite geriausią jūsų „Vue“ programai tinkantį metodą
Išmokote apibrėžti rekvizitus ir kaip masyvą, ir kaip objektą. Jūsų pasirinkimas turėtų atitikti konkrečius programos poreikius.
„Vue“ įrodo save kaip labai lanksčią „JavaScript“ sistemą. Jame siūloma daug metodų ir galimybių pasiekti tą patį tikslą su skirtingais privalumais bet kuriai pasirinktai dirbti ar metodui.
