Introduktion till Vue-komponenter

Beskrivning

När du utvecklar en stor applikation är det alltid en bra idé att dela upp den i mindre komponenter för att göra koden lättare att läsa, strukturera och underhålla. De flesta Vue-nybörjare förstår vad komponenter är åtminstone begreppsmässigt, men de kanske inte förstår vad de kan och inte kan göra fullt ut.

I den här guiden tar vi en titt på vad en komponent i Vue är, hur den fungerar, hur man skickar data och händelser genom dem och mycket mer.

Vad är en Vue-komponent?

Komponenter är återanvändbara instanser av Vue-element som inkluderar mallar, stilar och JavaScript-element. Varje komponent är "sin egen sak", liknande hur varje HTML-element är "sin egen sak", och både Vue-komponenter och HTML-element låter oss använda dem som byggstenar för webbsidor.

Du kan tänka på Vue-komponenter som JavaScript-genomsläppta HTML-element, som du kan definiera och manipulera själv.

En typisk Vue-applikation består av många komponenter som kan återanvändas så många gånger som behövs.

Till exempel har en vanlig webbplats sektioner som visas på alla sidor – navigeringsfält, sidhuvud, sidfot och så vidare. Därför anses det vara en bra praxis att göra var och en av dem till en separat komponent. På så sätt skapar vi välstrukturerad, läsbar, återanvändbar och lätt underhållbar kod:

Hur man skapar en Vue-komponent

Det finns två grundläggande sätt att skapa en Vue-komponent, beroende på hur vårt projekt skapades – med eller utan bygginställning. I det första fallet lagras varje komponent i en separat fil. I det andra fallet kan det finnas flera komponenter i en enda fil.

Skapa Vue-komponenter med en Build Setup

De flesta projekt skapas med hjälp av bygga inställning, vilket gör det möjligt för oss att skapa enfilskomponenter (SFC) – dedikerade komponentfiler med .vue förlängning. Detta gör att vi kan kapsla in en Vue-komponents mall, logik och stil i en enda 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>

Skapa Vue-komponenter utan en Build Setup

Om du av någon anledning inte kan använda en pakethanterare som t.ex npm för att installera Vue på din maskin kan du fortfarande använda Vue i din app. Ett alternativ till byggnaden Vue använder npm är att installera Vue via en CDN (Content Delivery Network) direkt i din app. Låt oss bara snabbt gå igenom det här sättet att skapa en Vue-komponent.

Genom att installera Vue utan build kommer vi att kunna använda Vue-specifika funktioner som vi gör med vanlig JavaScript. Syntaxen liknar något som vi har sett i de vanliga SFC:erna:

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

I den här guiden kommer vi att använda SFC-syntax, eftersom det är den mest använda metoden för att skapa komponenter.

Hur man registrerar komponenter i Vue

Hittills har vi sett hur man skapar komponenter i Vue. Nästa steg blir att använda dessa komponenter i en annan komponent (förälder-barn-hierarki).

För att göra det måste vi först registrera komponenter vi vill använda. Denna registrering innebär att man importerar och sedan registrerar komponenter. Det finns två alternativ för att göra det – global och lokal registrering.

Vue Components – Global registrering

Globalt registrerade komponenter, som namnet antyder, är tillgängliga globalt, vilket innebär att de kan användas i vilken komponent som helst i vår applikation utan att vi behöver importera dem igen. Detta görs genom att registrera en komponent med hjälp av app.component() metod:

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

I en situation där vi har många komponenter kan vi kedja dem så här:

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

Efter att vi har registrerat våra komponenter kan vi använda dem i mallen för alla komponenter i denna applikation med följande syntax:

<ChildComponent/>
<ProfileComponent/>

Vue Components – Lokal registrering

Vi kommer att använda lokal registrering i de flesta fall eftersom det tillåter oss att omfånga tillgängligheten av våra registrerade komponenter. Importera dessa komponenter och sedan lägga till dem i components alternativet åstadkommer detta:

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

När du namnger komponenter, använd Camelcase för att göra det tydligt att detta är en Vue-komponent snarare än ett inbyggt HTML-element i mallar. Detta gör det också lättare att importera och registrera komponenter i JavaScript.

Hur man skickar data genom Vue-komponenter

En av fördelarna med att skapa komponenter är möjligheten att återanvända kod genom att göra den modulär.

Anta att vi skapar en användares profilkomponent som behöver ta emot varje elevs data från profilsidan; i det här fallet måste vi överföra denna data från profilkomponenten (förälderkomponenten) till användarprofilkomponenten (underordnad komponent), och vi kommer att använda rekvisita.

rekvisita

Rekvisita är anpassade attribut som vi kan registrera på en komponent, så vi kan skicka data från den överordnade komponenten till den underordnade komponenten med hjälp av props alternativ inom skripttaggen:

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

spelautomater

Vue-slots är reserverade utrymmen som tillåter oss att överföra alla typer av innehåll från en komponent till en annan. Detta ger mer centraliserad kontroll än rekvisita eftersom, till skillnad från rekvisita, styr den överordnade komponenten innehållet inuti den underordnade komponenten. Till exempel kan vi göra följande knapp:

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

Sedan kan vi använda den här komponenten var som helst och ge den det innehåll vi önskar. Underlåtenhet att ge det ett innehåll betyder att det kommer att använda standardvärdet vi gav det (klicka på mig):

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

Hur man skickar ut händelser från Vue-komponenter

Vi lärde oss att rekvisita används för att skicka data från den överordnade komponenten ner till den underordnade komponenten. Men vi kan undra om det fanns ett sätt att skicka något från den underordnade komponenten till den överordnade komponenten. Och svaret är ja, kan händelser också skickas från den underordnade komponenten till den överordnade komponenten.

Antag att vi har en överordnad komponent (App.vue) som innehåller en enda underordnad komponent (MyBlogPost.vue). Dessutom innehåller den underordnade komponenten en knapp som är tänkt att ändra titeln.

Antag att vi vill ändra rubriken på vår sida när en knapp klickas, så att en funktion 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>

Och barnkomponenten kommer att se ut så här:

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

Slutsats

I den här guiden har vi lärt oss hur man arbetar med komponenter i Vue, vilket är viktigt för alla som använder Vue. Vi lärde oss också hur man skickar och tar emot data, samt hur man sänder ut händelser.

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://stackabuse.com/introduction-to-vue-components/