Sissejuhatus Vue komponentidesse

Sissejuhatus

Suure rakenduse arendamisel on alati hea mõte see väiksemateks komponentideks jaotada, et koodi oleks lihtsam lugeda, struktureerida ja hooldada. Enamik Vue algajaid mõistab, millised komponendid on vähemalt kontseptuaalselt, kuid nad ei pruugi aru saada, mida nad saavad ja mida mitte.

Selles juhendis vaatleme, mis on Vue komponent, kuidas see töötab, kuidas andmeid ja sündmusi nende kaudu edastada ning palju muud.

Mis on Vue komponent?

Kompkletis on Vue elementide korduvkasutatavad eksemplarid, mis sisaldavad malle, stiile ja JavaScripti elemente. Iga komponent on "oma asi", sarnaselt sellele, kuidas iga HTML-i element on "oma asi", ja nii Vue komponendid kui ka HTML-elemendid võimaldavad meil neid veebilehtede ehitusplokkidena kasutada.

Vue komponente võib pidada JavaScriptiga läbi imbunud HTML-elementideks, mida saate ise määratleda ja manipuleerida.

Tüüpiline Vue rakendus koosneb paljudest komponentidest, mida saab vajaduse korral korduvalt kasutada.

Näiteks tavalisel veebisaidil on jaotised, mis ilmuvad kõigil lehtedel – navigeerimisriba, päis, jalus jne. Seetõttu peetakse heaks tavaks muuta igaüks neist eraldi komponendiks. Nii loome hästi struktureeritud, loetava, korduvkasutatava ja hõlpsasti hooldatava koodi:

Kuidas luua Vue komponenti

Vue komponendi loomiseks on kaks peamist viisi, olenevalt sellest, kuidas meie projekt loodi – koos ehituse seadistusega või ilma. Esimesel juhul salvestatakse iga komponent eraldi faili. Teisel juhul võib ühes failis olla mitu komponenti.

Looge Vue komponente ehituse seadistusega

Enamik projekte luuakse kasutades ehitamise seadistus, mis võimaldab meil luua ühe faili komponente (SFC-d) – spetsiaalsed komponentfailid koos .vue pikendamine. See võimaldab meil kapseldada Vue komponendi malli, loogika ja stiili ühte faili:

<!-- 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>

Looge Vue komponente ilma ehituse seadistamiseta

Kui te mingil põhjusel ei saa kasutada paketihaldurit, näiteks npm Vue oma arvutisse installimiseks saate siiski oma rakenduses Vue'i kasutada. Alternatiiv hoonele Vue kasutades npm on installida Vue a kaudu CDN (sisu edastamise võrk) otse teie rakenduses. Vaatame lihtsalt seda Vue komponendi loomise viisi.

Vue installimine ilma ehitamiseta võimaldab meil kasutada Vue-spetsiifilisi funktsioone nagu tavalise JavaScripti puhul. Süntaks on mõnevõrra sarnane sellega, mida oleme näinud tavalistes SFC-des:

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

Selles juhendis kasutame SFC süntaks, kuna see on komponentide loomise kõige sagedamini kasutatav meetod.

Kuidas Vue's komponente registreerida

Siiani oleme näinud, kuidas Vue's komponente luua. Järgmine samm on nende komponentide kasutamine mõnes teises komponendis (vanem-laps hierarhia).

Selleks peame esmalt registreerima komponendid, mida soovime kasutada. See registreerimine hõlmab komponentide importimist ja seejärel registreerimist. Selleks on kaks võimalust – globaalne ja kohalik registreerimine.

Vue komponendid – ülemaailmne registreerimine

Globaalselt registreeritud komponendid, nagu nimigi viitab, on ülemaailmselt saadaval, mis tähendab, et neid saab kasutada meie rakenduse mis tahes komponendis, ilma et peaksime neid uuesti importima. See saavutatakse komponendi registreerimisega, kasutades app.component() meetod:

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

Olukorras, kus meil on palju komponente, saame hakkama kett neid nii:

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

Kui oleme oma komponendid registreerinud, saame neid kasutada selle rakenduse mis tahes komponendi mallis, kasutades järgmist süntaksit:

<ChildComponent/>
<ProfileComponent/>

Vue komponendid – kohalik registreerimine

Enamikul juhtudel kasutame kohalikku registreerimist, kuna see võimaldab meil kontrollida registreeritud komponentide saadavust. Nende komponentide importimine ja seejärel nende lisamine components valik saavutab selle:

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

Komponentide nimetamisel kasutage Camel Case et teha selgeks, et tegemist on pigem Vue komponendiga kui mallide natiivse HTML-elemendiga. See hõlbustab ka komponentide importimist ja registreerimist JavaScriptis.

Kuidas andmeid Vue komponentide kaudu edastada

Üks komponentide loomise eeliseid on võimalus koodi uuesti kasutada, muutes selle modulaarseks.

Oletame, et loome kasutajaprofiili komponendi, mis peab saama profiililehelt iga õpilase andmed; sel juhul peame need andmed profiilikomponendist (emakomponent) edasi andma kasutajaprofiili komponendile (lapskomponent) ja kasutame rekvisiite.

rekvisiidid

Rekvisiidid on kohandatud atribuudid, mida saame komponendile registreerida, nii et saame edastada andmeid emakomponendist alamkomponendile, kasutades props valik skriptimärgendis:

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

Slots

Vue pesad on reserveeritud ruumid, mis võimaldavad meil edastada mis tahes tüüpi sisu ühest komponendist teise. See annab tsentraliseeritud juhtimise kui rekvisiidid, sest erinevalt rekvisiitidest juhib põhikomponent alamkomponendi sisu. Näiteks võime teha järgmise nupu:

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

Seejärel saame seda komponenti kasutada kõikjal, kus tahame, ja anda sellele soovitud sisu. Sisu andmata jätmine tähendab, et see kasutab meie antud vaikeväärtust (klõpsake mulle):

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

Kuidas sündmusi Vue komponentidest väljastada

Saime teada, et rekvisiite kasutatakse andmete saatmiseks põhikomponendist alamkomponendile. Kuid me võime küsida, kas on võimalik saata midagi alamkomponendist emakomponendile. Ja vastus on jah, saab sündmusi saata ka alamkomponendist ülemkomponendile.

Oletame, et meil on ülemkomponent (App.vue), mis sisaldab ühte alamkomponenti (MyBlogPost.vue). Lisaks sisaldab alamkomponent nuppu, mis peaks pealkirja muutma.

Oletame, et tahame nupul klõpsamisel muuta oma lehe pealkirja, nii et funktsioon käivitub:

<!-- 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>

Ja alamkomponent näeb välja selline:

<!-- 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>

Järeldus

Selles juhendis oleme õppinud, kuidas töötada Vue komponentidega, mis on oluline kõigi Vue kasutajate jaoks. Õppisime ka andmete saatmist ja vastuvõtmist ning sündmuste edastamist.

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://stackabuse.com/introduction-to-vue-components/