Introduksjon til Vue-komponenter

Introduksjon

Når du utvikler en stor applikasjon, er det alltid en god idé å dele den opp i mindre komponenter for å gjøre koden lettere å lese, strukturere og vedlikeholde. De fleste Vue-nybegynnere forstår hva komponenter er i det minste konseptuelt, men de forstår kanskje ikke hva de kan og ikke kan gjøre fullt ut.

I denne veiledningen tar vi en titt på hva en komponent i Vue er, hvordan den fungerer, hvordan du sender data og hendelser gjennom dem og mye mer.

Hva er en Vue-komponent?

komponenter er gjenbrukbare forekomster av Vue-elementer som inkluderer maler, stiler og JavaScript-elementer. Hver komponent er "sin egen greie", på samme måte som hvert HTML-element er "sin egen greie", og både Vue-komponenter og HTML-elementer lar oss bruke dem som byggeklosser for nettsider.

Du kan tenke på Vue-komponenter som JavaScript-baserte HTML-elementer, som du kan definere og manipulere selv.

En typisk Vue-applikasjon består av en rekke komponenter som kan gjenbrukes så mange ganger som nødvendig.

For eksempel har et vanlig nettsted seksjoner som vises på alle sider – navbar, topptekst, bunntekst og så videre. Derfor anses det som en god praksis å gjøre hver av dem til en separat komponent. På den måten lager vi godt strukturert, lesbar, gjenbrukbar og lett vedlikeholdbar kode:

Hvordan lage en Vue-komponent

Det er to grunnleggende måter å lage en Vue-komponent på, avhengig av hvordan prosjektet vårt ble opprettet – med eller uten byggeoppsett. I det første tilfellet lagres hver komponent i en separat fil. I det andre tilfellet kan det være flere komponenter i en enkelt fil.

Lag Vue-komponenter med et byggeoppsett

De fleste prosjekter er opprettet ved hjelp av bygge oppsett, som gjør det mulig for oss å lage enkeltfilkomponenter (SFC-er) – dedikerte komponentfiler med .vue Utvidelse. Dette lar oss kapsle inn en Vue-komponents mal, logikk og stil i en enkelt fil:

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

Lag Vue-komponenter uten byggeoppsett

Hvis du, uansett grunn, ikke kan bruke en pakkebehandling som f.eks npm for å installere Vue på maskinen din, kan du fortsatt bruke Vue i appen din. Et alternativ til bygningen Vue bruker npm er å installere Vue via en CDN (Content Delivery Network) direkte i appen din. La oss bare raskt gå gjennom denne måten å lage en Vue-komponent på.

Å installere Vue uten build vil gjøre oss i stand til å bruke Vue-spesifikke funksjoner som vi gjør med vanlig JavaScript. Syntaksen ligner noe på det vi har sett i de vanlige SFC-ene:

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

I denne veiledningen vil vi bruke SFC-syntaks, siden det er den mest brukte metoden for å lage komponenter.

Hvordan registrere komponenter i Vue

Så langt har vi sett hvordan man lager komponenter i Vue. Det neste trinnet vil være å bruke disse komponentene i en annen komponent (foreldre-barn-hierarki).

For å gjøre det må vi først registrere komponenter vi ønsker å bruke. Denne registreringen innebærer import og deretter registrering av komponenter. Det er to alternativer for å gjøre det – global og lokal registrering.

Vue-komponenter – Global registrering

Globalt registrerte komponenter, som navnet tilsier, er tilgjengelige globalt, noe som betyr at de kan brukes i hvilken som helst komponent i applikasjonen vår uten at vi trenger å importere dem på nytt. Dette oppnås ved å registrere en komponent ved hjelp av app.component() metode:

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

I en situasjon hvor vi har mange komponenter, kan vi kjede dem på denne måten:

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

Etter at vi har registrert komponentene våre, kan vi bruke dem i malen til enhver komponent i denne applikasjonen ved å bruke følgende syntaks:

<ChildComponent/>
<ProfileComponent/>

Vue-komponenter – lokal registrering

Vi vil bruke lokal registrering i de fleste tilfeller fordi det lar oss se på tilgjengeligheten til våre registrerte komponenter. Importere disse komponentene og deretter legge dem til components alternativet oppnår dette:

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

Når du navngir komponenter, bruk Camelcase for å gjøre det klart at dette er en Vue-komponent i stedet for et naturlig HTML-element i maler. Dette gjør det også enklere å importere og registrere komponenter i JavaScript.

Hvordan sende data gjennom Vue-komponenter

En av fordelene med å lage komponenter er muligheten til å gjenbruke kode ved å gjøre den modulær.

Anta at vi oppretter en brukers profilkomponent som må motta hver elevs data fra profilsiden; i dette tilfellet må vi overføre disse dataene fra profilkomponenten (overordnet komponent) til brukerprofilkomponenten (underordnet komponent), og vi vil bruke rekvisitter.

rekvisitter

Rekvisitter er tilpassede attributter vi kan registrere på en komponent, slik at vi kan overføre data fra den overordnede komponenten til den underordnede komponenten ved å bruke props alternativ i script-taggen:

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

spilleautomater

Vue-spilleautomater er reserverte plasser som lar oss overføre alle typer innhold fra en komponent til en annen. Dette gir mer sentralisert kontroll enn rekvisitter fordi, i motsetning til rekvisitter, kontrollerer den overordnede komponenten innholdet inne i den underordnede komponenten. For eksempel kan vi lage følgende knapp:

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

Da kan vi bruke denne komponenten hvor som helst vi vil og gi den innholdet vi ønsker. Unnlatelse av å gi den et innhold betyr at den vil bruke standardverdien vi ga den (klikk meg):

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

Hvordan sende ut hendelser fra Vue-komponenter

Vi lærte at rekvisitter brukes til å sende data fra den overordnede komponenten ned til den underordnede komponenten. Men vi lurer kanskje på om det var en måte å sende noe fra den underordnede komponenten til den overordnede komponenten. Og svaret er ja, kan hendelser også sendes fra den underordnede komponenten til den overordnede komponenten.

Anta at vi har en overordnet komponent (App.vue) som inneholder en enkelt underordnet komponent (MyBlogPost.vue). Videre inneholder barnekomponenten en knapp som skal endre tittelen.

Anta at vi ønsker å endre tittelen på siden vår når en knapp klikkes, slik at en funksjon utløses:

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

Og barnekomponenten vil se slik ut:

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

konklusjonen

I denne veiledningen har vi lært hvordan du arbeider med komponenter i Vue, noe som er avgjørende for alle som bruker Vue. Vi lærte også hvordan man sender og mottar data, samt hvordan man sender ut hendelser.

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://stackabuse.com/introduction-to-vue-components/