Introduktion til Vue-komponenter

Introduktion

Når du udvikler en stor applikation, er det altid en god idé at dele den op i mindre komponenter for at gøre koden nemmere at læse, strukturere og vedligeholde. De fleste Vue-begyndere forstår, hvad komponenter er i det mindste konceptuelt, men de forstår måske ikke, hvad de kan og ikke kan gøre fuldt ud.

I denne guide tager vi et kig på, hvad en komponent i Vue er, hvordan den fungerer, hvordan man sender data og begivenheder gennem dem og meget mere.

Hvad er en Vue-komponent?

komponenter er genbrugelige forekomster af Vue-elementer, der inkluderer skabeloner, stilarter og JavaScript-elementer. Hver komponent er "sin egen ting", ligesom hvert HTML-element er "sin egen ting", og både Vue-komponenter og HTML-elementer giver os mulighed for at bruge dem som byggeklodser til websider.

Du kan tænke på Vue-komponenter som JavaScript-prægede HTML-elementer, som du selv kan definere og manipulere.

En typisk Vue-applikation består af adskillige komponenter, der kan genbruges så mange gange som nødvendigt.

For eksempel har en sædvanlig hjemmeside sektioner, der vises på alle sider - navbar, sidehoved, sidefod og så videre. Derfor anses det for at være en god praksis at gøre hver af dem til en separat komponent. På den måde skaber vi en velstruktureret, læsbar, genbrugelig og let vedligeholdelig kode:

Sådan opretter du en Vue-komponent

Der er to grundlæggende måder at oprette en Vue-komponent på, afhængigt af hvordan vores projekt blev oprettet – med eller uden byggeopsætning. I det første tilfælde er hver komponent gemt i en separat fil. I det andet tilfælde kan der være flere komponenter i en enkelt fil.

Opret Vue-komponenter med en Build-opsætning

De fleste projekter er oprettet ved hjælp af bygge opsætning, som gør det muligt for os at oprette enkeltfilskomponenter (SFC'er) – dedikerede komponentfiler med .vue udvidelse. Dette giver os mulighed for at indkapsle en Vue-komponents skabelon, logik 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>

Opret Vue-komponenter uden en Build-opsætning

Hvis du af en eller anden grund ikke kan bruge en pakkehåndtering som f.eks npm for at installere Vue på din maskine, kan du stadig bruge Vue i din app. Et alternativ til bygningen Vue ved hjælp af npm er at installere Vue via en CDN (Content Delivery Network) direkte i din app. Lad os lige hurtigt gennemgå denne måde at skabe en Vue-komponent på.

Installation af Vue uden build vil sætte os i stand til at bruge Vue-specifikke funktionaliteter, som vi gør med almindelig JavaScript. Syntaksen ligner noget, vi har set i de sædvanlige SFC'er:

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

I denne guide vil vi bruge SFC syntaks, da det er den mest brugte metode til at skabe komponenter.

Sådan registreres komponenter i Vue

Indtil videre har vi set, hvordan man opretter komponenter i Vue. Det næste trin vil være at bruge disse komponenter i en anden komponent (forælder-barn hierarki).

For at gøre det skal vi først registrere komponenter, vi ønsker at bruge. Denne registrering indebærer import og derefter registrering af komponenter. Der er to muligheder for at gøre det – global , lokal registrering.

Vue Components – Global registrering

Globalt registrerede komponenter, som navnet antyder, er tilgængelige globalt, hvilket betyder, at de kan bruges i enhver komponent i vores applikation, uden at vi skal importere dem igen. Dette opnås ved at registrere en komponent ved hjælp af app.component() metode:

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

I en situation, hvor vi har mange komponenter, kan vi kæde dem på denne måde:

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

Når vi har registreret vores komponenter, kan vi bruge dem i skabelonen for enhver komponent i denne applikation ved hjælp af følgende syntaks:

<ChildComponent/>
<ProfileComponent/>

Vue Components – Lokal registrering

Vi vil bruge lokal registrering i de fleste tilfælde, fordi det giver os mulighed for at omfatte tilgængeligheden af ​​vores registrerede komponenter. Importere disse komponenter og derefter tilføje dem til components option opnår dette:

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

Ved navngivning af komponenter, brug CamelCase for at gøre det klart, at dette er en Vue-komponent snarere end et indbygget HTML-element i skabeloner. Dette gør det også nemmere at importere og registrere komponenter i JavaScript.

Sådan sender du data gennem Vue-komponenter

En af fordelene ved at skabe komponenter er muligheden for at genbruge kode ved at gøre den modulopbygget.

Antag, at vi opretter en brugers profilkomponent, der skal modtage hver elevs data fra profilsiden; i dette tilfælde skal vi videregive disse data fra profilkomponenten (overordnet komponent) til brugerprofilkomponenten (underordnet komponent), og vi vil bruge rekvisitter.

rekvisitter

Rekvisitter er brugerdefinerede attributter, vi kan registrere på en komponent, så vi kan overføre data fra den overordnede komponent til den underordnede komponent ved hjælp af props mulighed i script-tagget:

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

Spillemaskiner

Vue slots er reserverede pladser, der giver os mulighed for at overføre enhver form for indhold fra en komponent til en anden. Dette giver mere centraliseret kontrol end rekvisitter, fordi i modsætning til rekvisitter, styrer den overordnede komponent indholdet inde i den underordnede komponent. For eksempel kunne vi lave følgende knap:

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

Så kan vi bruge denne komponent hvor som helst vi ønsker og give den det indhold, vi ønsker. Hvis du ikke giver det et indhold, betyder det, at det vil gøre brug af standardværdien, vi gav det (klik på mig):

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

Sådan udsender du hændelser fra Vue-komponenter

Vi lærte, at rekvisitter bruges til at sende data fra den overordnede komponent ned til den underordnede komponent. Men vi spekulerer måske på, om der var en måde at sende noget fra den underordnede komponent til den overordnede komponent. Og svaret er Ja, kan hændelser også sendes fra den underordnede komponent til den overordnede komponent.

Antag, at vi har en overordnet komponent (App.vue) der indeholder en enkelt underordnet komponent (MyBlogPost.vue). Ydermere indeholder den underordnede komponent en knap, som skal ændre titlen.

Antag, at vi ønsker at ændre titlen på vores side, når der trykkes på en knap, så en funktion udlø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 underordnet komponent vil se sådan ud:

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

Konklusion

I denne guide har vi lært, hvordan man arbejder med komponenter i Vue, hvilket er vigtigt for alle, der bruger Vue. Vi lærte også, hvordan man sender og modtager data, samt hvordan man udsender hændelser.

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://stackabuse.com/introduction-to-vue-components/