Johdatus Vue-komponentteihin

esittely

Kun kehitetään suurta sovellusta, on aina hyvä idea jakaa se pienempiin osiin, jotta koodia on helpompi lukea, jäsentää ja ylläpitää. Useimmat Vue-aloittelijat ymmärtävät, mitkä komponentit ovat ainakin käsitteellisesti, mutta he eivät ehkä ymmärrä, mitä he voivat tehdä ja mitä eivät.

Tässä oppaassa tarkastellaan, mikä Vuen komponentti on, miten se toimii, kuinka tietoja ja tapahtumia välitetään niiden läpi ja paljon muuta.

Mikä on Vue-komponentti?

komponentit ovat uudelleenkäytettäviä Vue-elementtejä, jotka sisältävät malleja, tyylejä ja JavaScript-elementtejä. Jokainen komponentti on "oman asiansa", kuten jokainen HTML-elementti on "oma asia", ja sekä Vue-komponentit että HTML-elementit antavat meille mahdollisuuden käyttää niitä verkkosivujen rakennuspalikoina.

Voit ajatella Vue-komponentteja JavaScriptillä täytetyinä HTML-elementteinä, joita voit määritellä ja muokata itse.

Tyypillinen Vue-sovellus koostuu useista komponenteista, joita voidaan käyttää uudelleen niin monta kertaa kuin tarvitaan.

Esimerkiksi tavallisella verkkosivustolla on osiot, jotka näkyvät kaikilla sivuilla – navigointipalkissa, ylätunnisteessa, alatunnisteessa ja niin edelleen. Siksi on hyvä käytäntö tehdä jokaisesta niistä erillinen komponentti. Tällä tavalla luomme hyvin jäsenneltyä, luettavaa, uudelleen käytettävää ja helposti ylläpidettävää koodia:

Kuinka luoda Vue-komponentti

Vue-komponentin luomiseen on kaksi perustapaa riippuen siitä, miten projektimme luotiin – rakennusasetuksella tai ilman. Ensimmäisessä tapauksessa jokainen komponentti tallennetaan erilliseen tiedostoon. Toisessa tapauksessa yhdessä tiedostossa voi olla useita komponentteja.

Luo Vue-komponentteja rakennusasetuksella

Suurin osa projekteista luodaan käyttämällä rakentaa asetukset, jonka avulla voimme luoda yhden tiedoston komponentteja (SFC:t) – omistetut komponenttitiedostot .vue laajennus. Tämän avulla voimme kapseloida Vue-komponentin mallin, logiikan ja tyylin yhteen tiedostoon:

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

Luo Vue-komponentteja ilman koontiasetuksia

Jos et jostain syystä voi käyttää paketinhallintaa, kuten npm asentaaksesi Vuen koneellesi, voit silti käyttää Vuea sovelluksessasi. Vaihtoehto Vue-rakennukselle npm on asentaa Vue kautta a CDN (sisällönjakeluverkko) suoraan sovelluksessasi. Käydäänpä nopeasti läpi tämä tapa luoda Vue-komponentti.

Vuen asentaminen ilman koontiversiota antaa meille mahdollisuuden käyttää Vue-spesifisiä toimintoja kuten tavallisen JavaScriptin kanssa. Syntaksi on jossain määrin samanlainen kuin tavallisissa SFC:issä:

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

Tässä oppaassa käytämme SFC-syntaksi, koska se on yleisimmin käytetty menetelmä komponenttien luomiseen.

Kuinka rekisteröidä komponentteja Vuessa

Toistaiseksi olemme nähneet, kuinka Vuessa voidaan luoda komponentteja. Seuraava vaihe on käyttää näitä komponentteja toisessa komponentissa (vanhempi-lapsi hierarkia).

Tätä varten meidän on ensin rekisteröitävä komponentit, joita haluamme käyttää. Tämä rekisteröinti edellyttää komponenttien tuontia ja sitten rekisteröintiä. Siihen on kaksi vaihtoehtoa - maailmanlaajuinen ja paikallinen rekisteröinti.

Vue Components – maailmanlaajuinen rekisteröinti

Maailmanlaajuisesti rekisteröidyt komponentit, kuten nimestä voi päätellä, ovat saatavilla maailmanlaajuisesti, mikä tarkoittaa, että niitä voidaan käyttää missä tahansa sovelluksemme osassa ilman, että meidän tarvitsee tuoda niitä uudelleen. Tämä saavutetaan rekisteröimällä komponentti käyttämällä app.component() menetelmä:

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

Tilanteessa, jossa meillä on monia komponentteja, voimme ketju ne näin:

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

Kun olemme rekisteröineet komponenttimme, voimme käyttää niitä minkä tahansa tämän sovelluksen komponentin mallissa käyttämällä seuraavaa syntaksia:

<ChildComponent/>
<ProfileComponent/>

Vue Components – Paikallinen rekisteröinti

Käytämme useimmissa tapauksissa paikallista rekisteröintiä, koska sen avulla voimme kattaa rekisteröityjen komponenttemme saatavuuden. Tuo nämä komponentit ja lisää ne sitten components vaihtoehto tekee tämän:

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

Kun nimeät komponentteja, käytä CamelCase tehdä selväksi, että tämä on Vue-komponentti pikemminkin kuin natiivi HTML-elementti malleissa. Tämä helpottaa myös komponenttien tuontia ja rekisteröintiä JavaScriptissä.

Kuinka siirtää tietoja Vue-komponenttien kautta

Yksi komponenttien luomisen eduista on kyky käyttää koodia uudelleen tekemällä siitä modulaarinen.

Oletetaan, että olemme luomassa käyttäjän profiilikomponenttia, jonka on saatava jokaisen opiskelijan tiedot profiilisivulta; tässä tapauksessa meidän on välitettävä nämä tiedot profiilikomponentista (emokomponentista) käyttäjäprofiilikomponentille (lapsikomponentille), ja käytämme rekvisiitta.

rekvisiitta

Propsit ovat mukautettuja attribuutteja, jotka voimme rekisteröidä komponenttiin, joten voimme siirtää tietoja pääkomponentista alikomponenttiin käyttämällä props vaihtoehto komentosarjatunnisteessa:

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

Kolikkopelit

Vue-paikat ovat varattuja tiloja, joiden avulla voimme siirtää kaikentyyppistä sisältöä komponentista toiseen. Tämä antaa keskitetymmän hallinnan kuin rekvisiitta, koska toisin kuin rekvisiitta, pääkomponentti ohjaa sisältöä alikomponentin sisällä. Voisimme tehdä esimerkiksi seuraavan painikkeen:

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

Sitten voimme käyttää tätä komponenttia missä tahansa haluamme ja antaa sille haluamamme sisällön. Jos sille ei anneta sisältöä, se käyttää sille antamaamme oletusarvoa (napsauta minua):

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

Tapahtumien lähettäminen Vue-komponenteista

Opimme, että rekvisiitta käytetään lähettämään tietoja yläkomponentista alakomponenttiin. Mutta saatamme ihmetellä, oliko tapa lähettää jotain alikomponentista pääkomponenttiin. Ja vastaus on Joo, tapahtumia voidaan lähettää myös alikomponentista pääkomponenttiin.

Oletetaan, että meillä on yläkomponentti (App.vue), joka sisältää yhden alikomponentin (MyBlogPost.vue). Lisäksi lapsikomponentti sisältää painikkeen, jonka on tarkoitus muuttaa otsikkoa.

Oletetaan, että haluamme muuttaa sivumme otsikkoa, kun painiketta napsautetaan, jotta toiminto käynnistyy:

<!-- 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 lapsikomponentti näyttää tältä:

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

Yhteenveto

Tässä oppaassa olemme oppineet työskentelemään Vuen komponenttien kanssa, mikä on välttämätöntä kaikille Vuen käyttäjille. Opimme myös lähettämään ja vastaanottamaan dataa sekä lähettämään tapahtumia.

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://stackabuse.com/introduction-to-vue-components/