Rekvizity Vue vám umožňujú zaregistrovať vlastné atribúty na komponente. Zistite, ako presne ich používať.
Jednou z kľúčových vlastností Vue je jeho modulárna architektúra, ktorá vám umožňuje vytvárať webové aplikácie kombináciou malých, opakovane použiteľných komponentov. To vám umožní jednoducho aktualizovať a udržiavať vašu webovú aplikáciu.
Každý komponent vo Vue môže mať svoj vlastný súbor údajov a metód, ktoré môžete odovzdať jeho podriadeným komponentom s rekvizitami. Tu sa dozviete, ako používať rekvizity vo Vue na odovzdávanie údajov z nadradených komponentov do podriadených.
Čo sú rekvizity vo Vue?
Props – skratka pre „vlastnosti“ – sú vlastné atribúty vo Vue, ktoré môže nadradený komponent odovzdať svojim podriadeným komponentom.
Vo Vue nadradené komponenty odovzdávajú podpery podriadeným komponentom v jednosmernom toku. To znamená, že podradené komponenty môžu iba čítať a využívať tieto odovzdané rekvizity, ale nemôžu upravovať údaje.
Používanie rekvizít vám umožňuje vytvárať opakovane použiteľné komponenty, ktoré môžete použiť vo svojej aplikácii. Rekvizity vám ušetria čas a námahu, pretože komponenty môžete použiť opakovane a nemusíte vytvárať nové komponenty od začiatku.
Ako odovzdať rekvizity vo Vue
Podávanie rekvizít vo Vue je jednoduché a odlišné od spôsobu, akým prechádzate rekvizity v Reacte. Ak chcete odovzdať podperu z nadradeného komponentu jeho podriadenému komponentu vo Vue, použite možnosť podpery v skripte podriadeného komponentu.
Tu je príklad:
Detská zložka
<šablóna>
<div>
<h1>{{ názov }}h1>
<p>{{ správa }}p>
<p>{{ emailová adresa }}p>
div>
šablóna>
<skript>
exportovať predvolené {
názov: "ChildComponent",
rekvizity: ["názov", "správa", "e-mailová adresa"],
};
skript>
Vyššie uvedený blok kódu popisuje podriadený komponent Vue využívajúci rekvizity na odovzdávanie údajov z nadradeného komponentu. Komponent obsahuje tri prvky HTML, ktoré zobrazujú titul, správu, a emailová adresa vlastnosti s interpoláciou.
The rekvizity voľba v podradenom komponente preberá rad vlastností. Toto pole definuje vlastnosti, ktoré podriadený komponent akceptuje od nadradeného komponentu.
Tu je príklad rodičovského komponentu Vue, ktorý odovzdáva údaje podriadenému komponentu rekvizity:
rodičovský komponent
<šablóna>
<div>
<detská zložka
title="Ahoj svet"
message="Toto je správa od nadradeného komponentu"
emailAddress="[email protected]"
/>
div>
šablóna><skript>
import ChildComponent z "./components/ChildComponent.vue";
exportovať predvolené {
názov: "ParentComponent",
komponenty: {
ChildComponent,
},
};
skript>
Nadradený komponent vo vyššie uvedenom bloku kódu odovzdáva tri rekvizity podriadenému komponentu. Blok kódu odovzdá statické hodnoty do titul, správu, a emailová adresa rekvizity.
Môžete tiež odovzdať dynamické hodnoty svojim rekvizitám pomocou v-viazať smernice. v-viazať je smernica používané vo Vue na viazanie údajov na atribúty HTML.
Tu je príklad nadradeného komponentu Vue využívajúceho v-viazať príkaz na odovzdanie dynamických hodnôt rekvizitám:
rodičovský komponent
<šablóna>
<div>
<detská zložka
:title= "názov"
:message= "správa"
:emailAddress= "e-mailová adresa"
/>
div>
šablóna><skript>
import ChildComponent z "./components/ChildComponent.vue";
exportovať predvolené {
názov: "ParentComponent",
komponenty: {
ChildComponent,
},
data() {
vrátiť {
názov: "Vitajte drahá",
správa: "Ako sa máš",
emailAddress: "[email protected]",
};
},
};
skript>
Pomocou v-viazať na odovzdanie údajov do podriadeného komponentu, môžete aktualizovať hodnoty rekvizít na základe stavu nadradeného komponentu. Napríklad zmenou titul dátová vlastnosť v nadradenom komponente, titul prop odovzdaný podriadenému komponentu bude tiež aktualizovaný.
Táto metóda definovania rekvizít ako poľa reťazcov je skrátený vzor. Každý z reťazcov v poli predstavuje rekvizitu. Táto metóda je ideálna, keď všetky rekvizity v poli majú rovnaké Typ údajov JavaScript.
Definovanie rekvizít ako objektu vo Vue
Definovanie rekvizít ako objektu JavaScript namiesto poľa umožňuje lepšie prispôsobenie každej rekvizity. Definovanie rekvizít ako objektu v komponente vám umožní špecifikovať očakávaný typ údajov každej rekvizity a predvolenú hodnotu.
Okrem toho môžete označiť konkrétne rekvizity podľa potreby, čím sa spustí varovanie, ak rekvizita nie je poskytnutá, keď sa komponent používa. Definovanie rekvizít ako objektu ponúka niekoľko výhod oproti definovaniu rekvizít ako poľa, vrátane:
- Definovanie očakávaného typu údajov a predvolenej hodnoty pre každú podperu uľahčuje vám a vášmu vývojárskemu tímu pochopiť, ako presne používať komponent.
- Označením rekvizít ako požadovaných môžete zachytiť chyby na začiatku procesu vývoja a poskytnúť viac informácií vývojárskemu tímu.
Tu je príklad, ako definovať rekvizity ako objekt v komponente Vue.js:
<šablóna>
<div>
<h1>{{ názov }}h1>
<p>{{ správa }}p>
<p>{{ emailová adresa }}p>
div>
šablóna>
<skript>
exportovať predvolené {
názov: "ChildComponent",
rekvizity: {
názov: {
typ: reťazec,
predvolené: "Predvolený názov",
},
správa: {
typ: reťazec,
predvolené: "Predvolená správa",
},
emailová adresa: {
typ: reťazec,
požadované: pravda,
},
},
};
skript>
Tento blok kódu je príkladom komponentu Vue.js, ktorý používa rekvizity na odovzdávanie údajov z nadradeného komponentu do podriadeného komponentu. Blok kódu definuje tieto rekvizity ako objekty s typom a predvolenou hodnotou alebo požadovaným príznakom.
Blok kódu definuje titul a správu rekvizity ako struny s a predvolená hodnotu a emailová adresa rekvizita ako a požadovaný reťazec.
Vyberte si najlepšiu metódu, ktorá vyhovuje vašej aplikácii Vue
Naučili ste sa definovať rekvizity ako pole aj objekt. Vaše preferencie by mali zodpovedať špecifickým potrebám vašej aplikácie.
Vue sa osvedčuje ako veľmi flexibilný rámec JavaScriptu. Ponúka množstvo metód a možností na dosiahnutie rovnakého cieľa s rôznymi výhodami pre ktorúkoľvek z možností alebo metód, s ktorými sa rozhodnete pracovať.
