Elementele de recuzită Vue vă permit să înregistrați atribute personalizate pe o componentă. Aflați exact cum să le folosiți.
Una dintre caracteristicile cheie ale Vue este arhitectura sa modulară, care vă permite să construiți aplicații web combinând componente mici, reutilizabile. Acest lucru vă permite să actualizați și să întrețineți cu ușurință aplicația dvs. web.
Fiecare componentă din Vue poate avea propriul set de date și metode, pe care le puteți transmite componentelor sale secundare cu elemente de recuzită. Aici veți învăța cum să utilizați elementele de recuzită în Vue pentru a transmite date de la componentele părinte la componentele secundare.
Ce sunt elementele de recuzită în Vue?
Props — prescurtare de la „proprietăți” — sunt atribute personalizate în Vue pe care o componentă părinte le poate transmite componentelor sale secundare.
În Vue, componentele părinte transmit elemente de recuzită componentelor secundare într-un flux unidirecțional. Aceasta înseamnă că componentele copil pot citi și utiliza doar aceste elemente de recuzită transmise, dar nu pot modifica datele.
Utilizarea elementelor de recuzită vă permite să creați componente reutilizabile pe care le puteți aplica în aplicația dvs. Elementele de recuzită vă economisesc timp și efort, deoarece puteți reutiliza componente în loc să creați componente noi de la zero.
Cum să treci recuzită în Vue
Trecerea recuzită în Vue este simplă și diferită de modul în care treceți recuzită în React. Pentru a trece o reclamă de la o componentă părinte la componenta secundară a acesteia în Vue, utilizați opțiunea props din scriptul componentei secundare.
Iată un exemplu:
Componenta copil
<șablon>
<div>
<h1>{{ titlu }}h1>
<p>{{ mesaj }}p>
<p>{{ Adresa de e-mail }}p>
div>
șablon>
<scenariu>
export implicit {
nume: „ChildComponent”,
recuzită: [„titlu”, „mesaj”, „adresă de e-mail”],
};
scenariu>
Blocul de cod de mai sus descrie o componentă copil Vue care utilizează elemente de recuzită pentru a transmite date de la o componentă părinte. Componenta include trei elemente HTML care afișează titlu, mesaj, și Adresa de e-mail proprietăți cu interpolare.
The recuzită opțiunea din componenta copil preia o serie de proprietăți. Această matrice definește proprietățile pe care componenta copil le acceptă de la componenta părinte.
Iată un exemplu de componentă părinte Vue care transmite date către componenta copil cu recuzită:
componentă părinte
<șablon>
<div>
<copil-componentă
title="Bună ziua, lume"
message="Acesta este un mesaj de la componenta părinte"
emailAddress="[email protected]"
/>
div>
șablon><scenariu>
import ChildComponent din „./components/ChildComponent.vue”;
export implicit {
nume: „ParentComponent”,
componente: {
ChildComponent,
},
};
scenariu>
Componenta părinte din blocul de cod de mai sus transmite trei elemente de recuzită componentului copil. Blocul de cod transmite valori statice către titlu, mesaj, și Adresa de e-mail recuzită.
De asemenea, puteți transmite valori dinamice elementelor de recuzită cu ajutorul v-bind directivă. v-bind este o directivă folosit în Vue pentru a lega date la atributele HTML.
Iată un exemplu de componentă părinte Vue care utilizează v-bind directivă pentru a transmite valori dinamice elementelor de recuzită:
componentă părinte
<șablon>
<div>
<copil-componentă
:title= "titlu"
:message= „mesaj”
:emailAddress= "emailAddress"
/>
div>
șablon><scenariu>
import ChildComponent din „./components/ChildComponent.vue”;
export implicit {
nume: „ParentComponent”,
componente: {
ChildComponent,
},
date() {
întoarcere {
titlu: „Bine ați venit dragă”,
mesaj: „Ce mai faci”,
Adresa de e-mail: „[email protected]”,
};
},
};
scenariu>
Folosind v-bind directivă pentru a transmite date componentei secundare, puteți actualiza valorile elementelor de recuzită în funcție de starea componentei părinte. De exemplu, prin schimbarea titlu proprietatea datelor din componenta părinte, the titlu prop transmis la componenta copil va fi, de asemenea, actualizat.
Această metodă de definire a recuzitei ca o matrice de șiruri este un model prescurtat. Fiecare dintre șirurile din matrice reprezintă o prop. Această metodă este ideală atunci când toate elementele de recuzită din matrice au aceeași tip de date JavaScript.
Definirea elementelor de recuzită ca obiect în Vue
Definirea elementelor de recuzită ca obiect JavaScript în loc de matrice permite o mai bună personalizare a fiecărei elemente de recuzită. Definirea elementelor de recuzită ca obiect într-o componentă vă va permite să specificați tipul de date așteptat pentru fiecare prop și valoarea implicită.
În plus, puteți marca elemente de recuzită specifice după cum este necesar, declanșând un avertisment dacă recuzita nu este furnizată atunci când componenta este în uz. Definirea elementelor de recuzită ca obiect oferă mai multe avantaje față de definirea elementelor de recuzită ca și matrice, inclusiv:
- Definirea tipului de date așteptat și a valorii implicite pentru fiecare propr vă ajută să înțelegeți mai ușor pentru dvs. și pentru echipa de dezvoltatori cum să utilizați componenta.
- Prin marcarea elementelor de recuzită după cum este necesar, puteți detecta erorile la începutul procesului de dezvoltare și puteți oferi mai multe informații echipei de dezvoltatori.
Iată un exemplu de definire a elementelor de recuzită ca obiect într-o componentă Vue.js:
<șablon>
<div>
<h1>{{ titlu }}h1>
<p>{{ mesaj }}p>
<p>{{ Adresa de e-mail }}p>
div>
șablon>
<scenariu>
export implicit {
nume: „ChildComponent”,
recuzită: {
titlu: {
tip: șir,
implicit: „Titlul implicit”,
},
mesaj: {
tip: șir,
implicit: „Mesaj implicit”,
},
Adresa de e-mail: {
tip: șir,
necesar: adevărat,
},
},
};
scenariu>
Acest bloc de cod este un exemplu de componentă Vue.js care utilizează elemente de recuzită pentru a transmite date de la o componentă părinte la o componentă secundară. Blocul de cod definește aceste elemente de recuzită ca obiecte cu un tip și o valoare implicită sau un indicator necesar.
Blocul de cod definește titlu și mesaj recuzită ca șiruri cu a Mod implicit valoarea și cel Adresa de e-mail prop ca a necesar şir.
Alegeți cea mai bună metodă care se potrivește aplicației dvs. Vue
Ați învățat cum să definiți elementele de recuzită atât ca matrice, cât și ca obiect. Preferința dvs. ar trebui să se potrivească nevoilor specifice ale aplicației dvs.
Vue se dovedește a fi un cadru JavaScript foarte flexibil. Oferă o mulțime de metode și opțiuni pentru a atinge același obiectiv, cu avantaje diferite pentru oricare dintre opțiunile sau metodele cu care alegeți să lucrați.