A Vue kellékei lehetővé teszik egyéni attribútumok regisztrálását egy komponensen. Tudja meg pontosan, hogyan kell használni őket.
A Vue egyik legfontosabb jellemzője a moduláris architektúrája, amely lehetővé teszi webalkalmazások létrehozását kis, újrafelhasználható komponensek kombinálásával. Ez lehetővé teszi a webalkalmazások egyszerű frissítését és karbantartását.
A Vue minden egyes összetevője saját adat- és metóduskészlettel rendelkezhet, amelyeket kellékekkel továbbíthat az alárendelt összetevőknek. Itt megtudhatja, hogyan használhatja a Vue kellékeit az adatok átadására a szülőről a gyermek összetevőkre.
Mik azok a kellékek a Vue-ban?
A kellékek – a „tulajdonságok” rövidítése – olyan egyéni attribútumok a Vue-ban, amelyeket a szülőkomponens továbbadhat az alárendelt összetevőinek.
A Vue-ban a szülőkomponensek egyirányú folyamatban adják át a kellékeket a gyermekkomponenseknek. Ez azt jelenti, hogy a gyermekkomponensek csak olvasni és felhasználni tudják ezeket az átadott kellékeket, de nem módosíthatják az adatokat.
A kellékek használatával újrafelhasználható összetevőket hozhat létre, amelyeket az egész alkalmazás során alkalmazhat. A kellékekkel időt és erőfeszítést takaríthat meg, mivel az alkatrészeket újra felhasználhatja, ahelyett, hogy a semmiből hozna létre új összetevőket.
A kellékek átadása a Vue-ban
A kellékek átadása a Vue-ban egyszerű, és különbözik a passzolás módjától kellékek a Reactban. Ha egy propt a szülőkomponensről a gyermekkomponensnek szeretne átadni a Vue-ban, használja a props opciót az alárendelt összetevő szkriptjében.
Íme egy példa:
A gyermek összetevő
<sablon>
<div>
<h1>{{ cím }}h1>
<p>{{ üzenet }}p>
<p>{{ email cím }}p>
div>
sablon>
<forgatókönyv>
export default {
név: "ChildComponent",
kellékek: ["cím", "üzenet", "e-mail cím"],
};
forgatókönyv>
A fenti kódblokk egy Vue gyermekkomponenst ír le, amely kellékeket használ az adatok átadására a szülőkomponenstől. Az összetevő három HTML-elemet tartalmaz, amelyek megjelenítik a cím, üzenet, és email cím tulajdonságok interpolációval.
A kellékek opció a gyermekkomponensben tulajdonságok tömbjét veszi fel. Ez a tömb határozza meg azokat a tulajdonságokat, amelyeket a gyermekkomponens elfogad a szülőkomponenstől.
Íme egy példa egy Vue szülőkomponensre, amely adatokat ad át a gyermekkomponensnek kellékek:
szülő komponens
<sablon>
<div>
<gyermek-komponens
title="Hello World"
message="Ez egy üzenet a szülőkomponenstől"
emailAddress="[email protected]"
/>
div>
sablon><forgatókönyv>
a ChildComponent importálása a "./components/ChildComponent.vue" fájlból;
export default {
név: "ParentComponent",
összetevők: {
ChildComponent,
},
};
forgatókönyv>
A fenti kódblokk szülőkomponense három támaszt ad át a gyermekkomponensnek. A kódblokk statikus értékeket ad át a cím, üzenet, és email cím kellékek.
A dinamikus értékeket is átadhatja kellékeinek a v-kötés irányelv. v-kötés egy direktíva a Vue-ban az adatok kötésére használják HTML attribútumokhoz.
Íme egy példa a Vue szülőkomponensére, amely a v-kötés direktíva a dinamikus értékek átadására a kellékeknek:
szülő komponens
<sablon>
<div>
<gyermek-komponens
:title= "cím"
:message= "üzenet"
:emailAddress= "emailAddress"
/>
div>
sablon><forgatókönyv>
a ChildComponent importálása a "./components/ChildComponent.vue" fájlból;
export default {
név: "ParentComponent",
összetevők: {
ChildComponent,
},
adat() {
Visszatérés {
címe: "Üdvözöllek kedves"
üzenet: "Hogy vagy?"
emailcím: "[email protected]",
};
},
};
forgatókönyv>
Használni a v-kötés direktíva, hogy adatokat adjon át a gyermekkomponensnek, frissítheti a kellékek értékeit a szülőkomponens állapota alapján. Például a cím adattulajdonság a szülőkomponensben, a cím A gyermekkomponensnek átadott prop is frissül.
Ez a módszer a kellékek karakterláncok tömbjeként történő meghatározására egy gyorsírási minta. A tömbben lévő karakterláncok mindegyike egy prop. Ez a módszer akkor ideális, ha a tömb összes kelléke azonos JavaScript adattípus.
A kellékek objektumként való meghatározása a Vue-ban
A kellékek JavaScript objektumként történő meghatározása tömb helyett lehetővé teszi az egyes propok jobb testreszabását. A kellékek objektumként való meghatározása egy összetevőben lehetővé teszi az egyes támaszok várható adattípusának és alapértelmezett értékének megadását.
Ezenkívül szükség szerint megjelölhet bizonyos kellékeket, amelyek figyelmeztetést váltanak ki, ha a támaszték nincs megadva, amikor az alkatrész használatban van. A kellékek objektumként való meghatározása számos előnnyel jár a kellékek tömbként való meghatározásához képest, többek között:
- A várt adattípus és az egyes kellékek alapértelmezett értékének meghatározása megkönnyíti Önnek és fejlesztői csapatának, hogy megértsék, hogyan kell pontosan használni az összetevőt.
- A kellékek szükséges megjelölésével a fejlesztési folyamat korai szakaszában észlelheti a hibákat, és további információkkal szolgálhat a fejlesztői csapatnak.
Íme egy példa arra, hogyan lehet kellékeket objektumként meghatározni a Vue.js összetevőben:
<sablon>
<div>
<h1>{{ cím }}h1>
<p>{{ üzenet }}p>
<p>{{ email cím }}p>
div>
sablon>
<forgatókönyv>
export default {
név: "ChildComponent",
kellékek: {
cím: {
típus: húr,
alapértelmezett: "Alapértelmezett cím",
},
üzenet: {
típus: húr,
alapértelmezett: "Alapértelmezett üzenet",
},
email cím: {
típus: húr,
kötelező: igaz,
},
},
};
forgatókönyv>
Ez a kódblokk egy példa a Vue.js komponensre, amely propsok segítségével továbbítja az adatokat a szülőkomponenstől a gyermekkomponenshez. A kódblokk ezeket a kellékeket típussal és alapértelmezett értékkel vagy szükséges jelzővel rendelkező objektumként határozza meg.
A kódblokk határozza meg a cím és üzenet kellékek húrokként a alapértelmezett érték és a email cím kellék, mint a kívánt húr.
Válassza ki a legjobb módszert, amely megfelel az Ön Vue alkalmazásának
Megtanulta a kellékeket tömbként és objektumként is meghatározni. A preferenciának meg kell felelnie az alkalmazás speciális igényeinek.
A Vue nagyon rugalmas JavaScript keretrendszernek bizonyult. Számos módszert és lehetőséget kínál ugyanannak a célnak az eléréséhez, különböző előnyökkel minden olyan opcióhoz vagy módszerhez, amellyel dolgozni szeretne.
