Podpěry Vue vám umožňují zaregistrovat vlastní atributy na komponentu. Zjistěte, jak je přesně používat.
Jednou z klíčových vlastností Vue je jeho modulární architektura, která vám umožňuje vytvářet webové aplikace kombinací malých, opakovaně použitelných komponent. To vám umožní snadno aktualizovat a udržovat vaši webovou aplikaci.
Každá komponenta ve Vue může mít svou vlastní sadu dat a metod, které můžete předat jejím podřízeným komponentám s rekvizitami. Zde se dozvíte, jak používat rekvizity ve Vue k předávání dat z nadřazených komponent na podřízené.
Co jsou rekvizity ve Vue?
Props – zkratka pro „properties“ – jsou vlastní atributy ve Vue, které může nadřazená komponenta předávat svým podřízeným komponentám.
Ve Vue nadřazené komponenty předávají podpěry podřízeným komponentám v jednosměrném toku. To znamená, že podřízené komponenty mohou pouze číst a využívat tyto předané rekvizity, ale nemohou upravovat data.
Použití rekvizit vám umožňuje vytvářet opakovaně použitelné součásti, které můžete použít v celé své aplikaci. Rekvizity vám šetří čas a námahu, protože komponenty můžete znovu použít, než abyste vytvářeli nové komponenty od začátku.
Jak předat rekvizity ve Vue
Předávání rekvizit ve Vue je jednoduché a odlišné od způsobu, jakým míjíte rekvizity v Reactu. Chcete-li předat prop z nadřazené komponenty do její podřízené komponenty ve Vue, použijte volbu props ve skriptu podřízené komponenty.
Zde je příklad:
Podřízená složka
<šablona>
<div>
<h1>{{ název }}h1>
<p>{{ zpráva }}p>
<p>{{ emailová adresa }}p>
div>
šablona>
<skript>
exportovat výchozí {
název: "ChildComponent",
rekvizity: ["title", "message", "emailAddress"],
};
skript>
Výše uvedený blok kódu popisuje podřízenou komponentu Vue využívající rekvizity k předávání dat z nadřazené komponenty. Komponenta obsahuje tři prvky HTML, které zobrazují titul, zpráva, a emailová adresa vlastnosti s interpolací.
The rekvizity volba v podřízené komponentě přebírá řadu vlastností. Toto pole definuje vlastnosti, které podřízená komponenta přijímá od nadřazené komponenty.
Zde je příklad nadřazené komponenty Vue, která předává data podřízené komponentě rekvizity:
nadřazená složka
<šablona>
<div>
<dětská složka
title="Ahoj světe"
message="Toto je zpráva od nadřazené komponenty"
emailAddress="[email protected]"
/>
div>
šablona><skript>
import ChildComponent z "./components/ChildComponent.vue";
exportovat výchozí {
název: "ParentComponent",
komponenty: {
ChildComponent,
},
};
skript>
Nadřazená komponenta ve výše uvedeném bloku kódu předá tři rekvizity podřízené komponentě. Blok kódu předává statické hodnoty do titul, zpráva, a emailová adresa rekvizity.
Můžete také předat dynamické hodnoty svým rekvizitám pomocí v-vázat směrnice. v-vázat je směrnice používá se ve Vue ke spojení dat na atributy HTML.
Zde je příklad nadřazené komponenty Vue využívající v-vázat direktiva pro předání dynamických hodnot rekvizitám:
nadřazená složka
<šablona>
<div>
<dětská složka
:title= "název"
:message= "zpráva"
:emailAddress= "e-mailová adresa"
/>
div>
šablona><skript>
import ChildComponent z "./components/ChildComponent.vue";
exportovat výchozí {
název: "ParentComponent",
komponenty: {
ChildComponent,
},
data() {
vrátit se {
název: "Vítejte drahá",
zpráva: "Jak se máš",
emailová adresa: "[email protected]",
};
},
};
skript>
Za použití v-vázat direktivu pro předávání dat podřízené komponentě, můžete aktualizovat hodnoty props na základě stavu nadřazené komponenty. Například změnou titul datová vlastnost v nadřazené komponentě, the titul prop předaná podřízené komponentě bude také aktualizována.
Tato metoda definování rekvizit jako pole řetězců je zkrácený vzor. Každý z řetězců v poli představuje prop. Tato metoda je ideální, když všechny rekvizity v poli mají stejné Typ dat JavaScript.
Definování rekvizit jako objektu ve Vue
Definování rekvizit jako objektu JavaScript namísto pole umožňuje lepší přizpůsobení každé rekvizity. Definování rekvizit jako objektu v komponentě vám umožní určit očekávaný datový typ každé rekvizity a výchozí hodnotu.
Kromě toho můžete označit konkrétní rekvizity podle potřeby a spustit varování, pokud rekvizita není k dispozici, když se komponenta používá. Definování rekvizit jako objektu nabízí několik výhod oproti definici rekvizit jako pole, včetně:
- Definování očekávaného datového typu a výchozí hodnoty pro každou prop usnadňuje vám a vašemu vývojářskému týmu, abyste pochopili, jak přesně komponentu používat.
- Označením rekvizit jako požadovaných můžete zachytit chyby na začátku procesu vývoje a poskytnout vývojářskému týmu více informací.
Zde je příklad, jak definovat rekvizity jako objekt v komponentě Vue.js:
<šablona>
<div>
<h1>{{ název }}h1>
<p>{{ zpráva }}p>
<p>{{ emailová adresa }}p>
div>
šablona>
<skript>
exportovat výchozí {
název: "ChildComponent",
rekvizity: {
název: {
typ: Řetězec,
výchozí: "Výchozí název",
},
zpráva: {
typ: Řetězec,
výchozí: "Výchozí zpráva",
},
emailová adresa: {
typ: Řetězec,
povinné: pravda,
},
},
};
skript>
Tento blok kódu je příkladem komponenty Vue.js, která používá rekvizity k předávání dat z nadřazené komponenty do podřízené komponenty. Blok kódu definuje tyto rekvizity jako objekty s typem a výchozí hodnotou nebo požadovaným příznakem.
Blok kódu definuje titul a zpráva rekvizity jako struny s a výchozí hodnotu a emailová adresa rekvizita jako a Požadované tětiva.
Vyberte si nejlepší metodu, která vyhovuje vaší aplikaci Vue
Naučili jste se, jak definovat rekvizity jako pole i objekt. Vaše preference by měly odpovídat konkrétním potřebám vaší aplikace.
Vue se osvědčuje jako velmi flexibilní rámec JavaScriptu. Nabízí spoustu metod a možností, jak dosáhnout stejného cíle s různými výhodami pro kteroukoli z možností nebo metod, se kterými se rozhodnete pracovat.
