Kako koristiti rekvizite za stvaranje boljih Vue komponenti

Jedna od ključnih značajki Vuea je njegova modularna arhitektura, koja vam omogućuje izradu web aplikacija kombiniranjem malih komponenti za višekratnu upotrebu. To vam omogućuje jednostavno ažuriranje i održavanje vaše web aplikacije.

Svaka komponenta u Vueu može imati vlastiti skup podataka i metoda, koje možete proslijediti njenim podređenim komponentama s rekvizitima. Ovdje ćete naučiti kako koristiti rekvizite u Vueu za prijenos podataka s nadređenih na podređene komponente.

Što su rekviziti u Vueu?

Rekviziti—skraćenica za "svojstva"—su prilagođeni atributi u Vueu koje nadređena komponenta može proslijediti svojim podređenim komponentama.

U Vueu nadređene komponente prosljeđuju props podređenim komponentama u jednosmjernom toku. To znači da podređene komponente mogu samo čitati i koristiti ove proslijeđene rekvizite, ali ne mogu mijenjati podatke.

Korištenje rekvizita omogućuje vam stvaranje komponenti za višekratnu upotrebu koje možete primijeniti u cijeloj aplikaciji. Rekviziti vam štede vrijeme i trud, jer možete ponovno koristiti komponente umjesto da stvarate nove komponente od nule.

Kako proslijediti rekvizite u Vue

Dodavanje rekvizita u Vueu jednostavno je i razlikuje se od načina na koji prolazite rekvizite u Reactu. Za prosljeđivanje rekvizita s roditeljske komponente na njezinu djetetovu komponentu u Vueu upotrijebite opciju rekvizita u skripti dijetetske komponente.

Evo primjera:

 Dijete komponenta 
<šablona>
<div>
<h1>{{ naslov }}h1>
<str>{{ poruka }}str>
<str>{{ email adresa }}str>
div>
šablona>
<skripta>
izvoz zadanih {
 naziv: "Komponenta djeteta",
 props: ["title", "message", "emailAddress"],
};
skripta>

Gornji blok koda opisuje podređenu komponentu Vue koja koristi props za prosljeđivanje podataka od nadređene komponente. Komponenta uključuje tri HTML elementa koji prikazuju titula, poruka, i email adresa svojstva s interpolacijom.

The rekviziti opcija u podređenoj komponenti uzima niz svojstava. Ovaj niz definira svojstva koja podređena komponenta prihvaća od nadređene komponente.

Evo primjera nadređene komponente Vue koja prosljeđuje podatke podređenoj komponenti rekviziti:

 nadređena komponenta 
<šablona>
<div>
<dijete-komponenta
 title="Zdravo svijete"
 message="Ovo je poruka nadređene komponente"
 emailAddress="user0000@example.com"
 />
div>
šablona>
<skripta>
import ChildComponent iz "./components/ChildComponent.vue";
izvoz zadanih {
 ime: "Nadređena komponenta",
 komponente: {
 ChildComponent,
 },
};
skripta>

Nadređena komponenta u gornjem bloku koda prosljeđuje tri rekvizita podređenoj komponenti. Blok koda prosljeđuje statičke vrijednosti u titula, poruka, i email adresa rekviziti.

Također možete prenijeti dinamičke vrijednosti svojim rekvizitima pomoću v-vezivanje direktiva. v-vezivanje je direktiva koristi se u Vueu za vezanje podataka na HTML atribute.

Evo primjera nadređene komponente Vue koja koristi v-vezivanje direktiva za prosljeđivanje dinamičkih vrijednosti rekvizitima:

 nadređena komponenta 
<šablona>
<div>
<dijete-komponenta
 :title= "naslov"
 :message= "poruka"
 :emailAddress= "emailAddress"
 />
div>
šablona>
<skripta>
import ChildComponent iz "./components/ChildComponent.vue";
izvoz zadanih {
 ime: "Nadređena komponenta",
 komponente: {
 ChildComponent,
 },
 podaci() {
 povratak {
 naslov: "Dobro došla draga",
 poruka: "Kako si",
 adresa e-pošte: "user0000@gmail.com",
 };
 },
};
skripta>

Koristiti v-vezivanje direktivu za prosljeđivanje podataka podređenoj komponenti, možete ažurirati vrijednosti rekvizita na temelju stanja nadređene komponente. Na primjer, promjenom titula data svojstvo u nadređenoj komponenti, the titula prop proslijeđen podređenoj komponenti također će se ažurirati.

Ova metoda definiranja rekvizita kao niza nizova je skraćeni uzorak. Svaki od nizova u nizu predstavlja rekvizit. Ova metoda je idealna kada svi rekviziti u nizu imaju iste JavaScript vrsta podataka.

Definiranje rekvizita kao objekta u Vueu

Definiranje propsa kao JavaScript objekta umjesto niza omogućuje bolju prilagodbu svakog propsa. Definiranje rekvizita kao objekta u komponenti omogućit će vam da navedete očekivani tip podataka i zadanu vrijednost svakog rekvizita.

Osim toga, možete označiti određene rekvizite prema potrebi, aktivirajući upozorenje ako rekvizite nisu dostavljeni dok je komponenta u upotrebi. Definiranje rekvizita kao objekta nudi nekoliko prednosti u odnosu na definiranje rekvizita kao niza, uključujući:

1. Definiranje očekivane vrste podataka i zadane vrijednosti za svaki rekvizit olakšava vama i vašem timu programera da razumijete kako točno koristiti komponentu.
2. Označavanjem rekvizita prema potrebi možete uočiti pogreške rano u procesu razvoja i dati više informacija razvojnom timu.

Evo primjera kako definirati props kao objekt u Vue.js komponenti:

<šablona>
<div>
<h1>{{ naslov }}h1>
<str>{{ poruka }}str>
<str>{{ email adresa }}str>
div>
šablona>
<skripta>
izvoz zadanih {
 naziv: "Komponenta djeteta",
 rekviziti: {
 naslov: {
 vrsta: niz,
 zadano: "Zadani naslov",
 },
 poruka: {
 vrsta: niz,
 zadano: "Zadana poruka",
 },
 email adresa: {
 vrsta: niz,
 obavezno: istina,
 },
 },
};
skripta>

Ovaj blok koda je primjer Vue.js komponente koja koristi props za prijenos podataka od nadređene komponente do podređene komponente. Blok koda definira te rekvizite kao objekte s vrstom i zadanom vrijednošću ili potrebnom oznakom.

Blok koda definira titula i poruka rekviziti kao žice s a zadano vrijednost i email adresa oslonac kao a potreban niz.

Odaberite najbolju metodu koja odgovara vašoj aplikaciji Vue

Naučili ste kako definirati rekvizite i kao niz i kao objekt. Vaše postavke trebaju odgovarati specifičnim potrebama vaše aplikacije.

Vue se pokazao kao vrlo fleksibilan JavaScript okvir. Nudi mnoštvo metoda i opcija za postizanje istog cilja s različitim prednostima za bilo koju od opcija ili metoda s kojima odlučite raditi.