Bevezetés a Vue komponensekbe

Bevezetés

Egy nagy alkalmazás fejlesztésekor mindig célszerű kisebb komponensekre bontani, hogy a kód könnyebben olvasható, strukturálható és karbantartható legyen. A legtöbb Vue-kezdő legalább fogalmilag tisztában van azzal, hogy mely összetevőkről van szó, de előfordulhat, hogy nem érti, hogy mire képes és mit nem.

Ebben az útmutatóban megnézzük, hogy mi a Vue egyik összetevője, hogyan működik, hogyan lehet adatokat és eseményeket átadni rajtuk, és még sok mást.

Mi az a Vue komponens?

alkatrészek a Vue elemek újrafelhasználható példányai, amelyek sablonokat, stílusokat és JavaScript elemeket tartalmaznak. Minden komponens „saját dolga”, hasonlóan ahhoz, ahogy minden HTML elem „saját dolga”, és mind a Vue-komponensek, mind a HTML-elemek lehetővé teszik, hogy weboldalak építőköveként használjuk őket.

A Vue-összetevőket JavaScripttel átitatott HTML-elemeknek tekintheti, amelyeket saját maga határozhat meg és kezelhet.

Egy tipikus Vue-alkalmazás számos összetevőből áll, amelyek szükség szerint többször felhasználhatók.

Például egy szokásos webhelyen vannak olyan szakaszok, amelyek minden oldalon megjelennek – a navigációs sávon, a fejlécen, a láblécen stb. Ezért jó gyakorlatnak tekinthető, ha mindegyiket különálló összetevőként készítik el. Így jól strukturált, olvasható, újrafelhasználható és könnyen karbantartható kódot hozunk létre:

Hogyan készítsünk Vue komponenst

Két alapvető módja van a Vue komponens létrehozásának, attól függően, hogy projektünket hogyan hozták létre: felépítéssel vagy anélkül. Az első esetben minden komponens külön fájlban van tárolva. A második esetben több összetevő is lehet egyetlen fájlban.

Hozzon létre Vue-összetevőket egy összeállítással

A legtöbb projekt a build beállítás, amely lehetővé teszi egyfájlos komponensek létrehozását (SFC-k) – dedikált komponensfájlok a .vue kiterjesztés. Ez lehetővé teszi, hogy egy Vue-összetevő sablonját, logikáját és stílusát egyetlen fájlba foglaljuk:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Hozzon létre Vue-összetevőket beépítési beállítások nélkül

Ha bármilyen okból nem tud olyan csomagkezelőt használni, mint pl npm hogy telepítse a Vue-t a gépére, továbbra is használhatja a Vue-t az alkalmazásban. A Vue épület alternatívája npm a Vue telepítése a CDN (tartalomszolgáltatási hálózat) közvetlenül az alkalmazásban. Tekintsük át gyorsan a Vue-komponens létrehozásának ezt a módját.

A Vue build nélküli telepítése lehetővé teszi, hogy a Vue-specifikus funkciókat ugyanúgy használjuk, mint a sima JavaScript esetében. A szintaxis némileg hasonló ahhoz, amit a szokásos SFC-knél láttunk:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

Ebben az útmutatóban a SFC szintaxis, mivel ez a leggyakrabban használt módszer az összetevők létrehozására.

Összetevők regisztrálása a Vue-ban

Eddig láttuk, hogyan lehet összetevőket létrehozni a Vue-ban. A következő lépés az lesz, hogy ezeket az összetevőket egy másik komponensen belül használjuk (szülő-gyermek hierarchia).

Ehhez először regisztrálnunk kell a használni kívánt összetevőket. Ez a regisztráció magában foglalja az összetevők importálását, majd regisztrálását. Erre két lehetőség van – globális és a helyi regisztráció.

Vue Components – Globális regisztráció

A globálisan regisztrált összetevők, ahogy a név is sugallja, globálisan elérhetők, ami azt jelenti, hogy az alkalmazásunk bármely összetevőjében felhasználhatók anélkül, hogy újra importálnunk kellene őket. Ez úgy érhető el, hogy egy összetevőt regisztrál a app.component() eljárás:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

Olyan helyzetben, amikor sok összetevőnk van, megtehetjük lánc őket így:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Miután regisztráltuk összetevőinket, használhatjuk őket az alkalmazás bármely összetevőjének sablonjában a következő szintaxis használatával:

<ChildComponent/>
<ProfileComponent/>

Vue Components – Helyi regisztráció

A legtöbb esetben helyi regisztrációt fogunk használni, mert ez lehetővé teszi számunkra, hogy korlátozzuk regisztrált összetevőink elérhetőségét. Ezen összetevők importálása, majd hozzáadása a components opció ezt teszi:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

A komponensek elnevezésénél használja CamelCase egyértelművé tenni, hogy ez egy Vue összetevő, nem pedig egy natív HTML elem a sablonokban. Ez megkönnyíti az összetevők importálását és regisztrálását is a JavaScriptben.

Adatok továbbítása Vue-komponenseken keresztül

Az összetevők létrehozásának egyik előnye, hogy a kódot modulárissá alakítva újra fel lehet használni.

Tegyük fel, hogy létrehozunk egy felhasználói profil-összetevőt, amelynek minden tanuló adatait meg kell kapnia a profiloldalról; ebben az esetben ezeket az adatokat a profilkomponensből (szülőkomponens) át kell adnunk a felhasználói profil komponensnek (gyermekkomponensnek), és kellékeket fogunk használni.

kellékek

A kellékek olyan egyéni attribútumok, amelyeket egy komponensen regisztrálhatunk, így a szülőkomponensből a gyermekkomponensnek továbbíthatunk adatokat a props opció a script címkén belül:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

slots

A Vue slotok olyan lefoglalt helyek, amelyek lehetővé teszik számunkra, hogy bármilyen típusú tartalmat átadjunk egyik összetevőről a másikra. Ez központibb vezérlést biztosít, mint a kellékek, mivel a kellékekkel ellentétben a szülőkomponens vezérli a gyermekkomponensen belüli tartalmat. Például elkészíthetjük a következő gombot:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Ezután bárhol használhatjuk ezt a komponenst, és megadhatjuk neki a kívánt tartalmat. Ha nem ad meg tartalmat, az azt jelenti, hogy az általunk megadott alapértelmezett értéket fogja használni (Kattintson rám):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Hogyan lehet eseményeket kibocsátani a Vue Componentsből

Megtudtuk, hogy a kellékeket arra használják, hogy adatokat küldjenek a szülőkomponensből a gyermekkomponensbe. De elgondolkodhatunk azon, hogy van-e mód arra, hogy valamit küldjünk a gyermekkomponensből a szülőkomponensnek. És a válasz az Igen, az események elküldhetők a gyermekkomponensből a szülőkomponensbe is.

Tegyük fel, hogy van egy szülőkomponensünk (App.vue), amely egyetlen gyermekkomponenst tartalmaz (MyBlogPost.vue). Ezen túlmenően a gyermekkomponens tartalmaz egy gombot, amely a címet módosítja.

Tételezzük fel, hogy meg akarjuk változtatni oldalunk címét, amikor egy gombra kattintunk, hogy egy funkció aktiválódjon:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

A gyermekkomponens pedig így fog kinézni:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Következtetés

Ebben az útmutatóban megtanultuk, hogyan kell dolgozni a Vue összetevőivel, ami elengedhetetlen a Vue-t használók számára. Megtanultuk továbbá az adatok küldését és fogadását, valamint az események kibocsátását.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://stackabuse.com/introduction-to-vue-components/