Jak používat rekvizity k vytváření lepších komponent Vue

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ě:

1. 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.
2. 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.