Inleiding tot Vue-componenten

Introductie

Wanneer u een grote applicatie ontwikkelt, is het altijd een goed idee om deze op te delen in kleinere componenten, zodat de code gemakkelijker te lezen, structureren en onderhouden is. De meeste Vue-beginners begrijpen wat componenten in ieder geval conceptueel zijn, maar ze begrijpen misschien niet volledig wat ze wel en niet kunnen doen.

In deze handleiding bekijken we wat een component in Vue is, hoe het werkt, hoe gegevens en gebeurtenissen er doorheen kunnen worden doorgegeven en nog veel meer.

Wat is een Vue-component?

COMPONENTEN zijn herbruikbare exemplaren van Vue-elementen die sjablonen, stijlen en JavaScript-elementen bevatten. Elke component is “zijn eigen ding”, vergelijkbaar met hoe elk HTML-element “zijn eigen ding” is, en zowel Vue-componenten als HTML-elementen stellen ons in staat ze te gebruiken als bouwstenen voor webpagina’s.

U kunt Vue-componenten beschouwen als met JavaScript doordrenkte HTML-elementen, die u zelf kunt definiëren en manipuleren.

Een typische Vue-applicatie bestaat uit talloze componenten die zo vaak als nodig kunnen worden hergebruikt.

Een gewone website heeft bijvoorbeeld secties die op alle pagina's verschijnen: navigatiebalk, koptekst, voettekst, enzovoort. Daarom wordt het als een goede gewoonte beschouwd om van elk ervan een afzonderlijk onderdeel te maken. Op die manier creëren we goed gestructureerde, leesbare, herbruikbare en gemakkelijk te onderhouden code:

Hoe u een Vue-component maakt

Er zijn twee basismanieren om een ​​Vue-component te maken, afhankelijk van hoe ons project is gemaakt: met of zonder bouwopstelling. In het eerste geval wordt elk onderdeel in een apart bestand opgeslagen. In het tweede geval kunnen er meerdere componenten in één bestand voorkomen.

Maak Vue-componenten met een build-setup

De meeste projecten worden gemaakt met behulp van de opstelling bouwen, waarmee we componenten met één bestand kunnen maken (SFC's) – speciale componentbestanden met de extensie .vue verlenging. Hierdoor kunnen we de sjabloon, logica en stijl van een Vue-component in één enkel bestand samenvatten:

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

Maak Vue-componenten zonder een build-installatie

Als u om welke reden dan ook geen gebruik kunt maken van een pakketbeheerder zoals npm om Vue op uw machine te installeren, kunt u nog steeds Vue in uw app gebruiken. Een alternatief voor het gebouw waar Vue gebruik van maakt npm is om Vue te installeren via een Content Delivery Network (CDN) direct in uw app. Laten we even snel deze manier bespreken om een ​​Vue-component te maken.

Door Vue zonder build te installeren, kunnen we Vue-specifieke functionaliteiten gebruiken zoals we doen met gewoon JavaScript. De syntaxis is enigszins vergelijkbaar met wat we hebben gezien in de gebruikelijke SFC's:

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

In deze handleiding gebruiken we de SFC-syntaxis, aangezien dat de meest gebruikte methode is om componenten te maken.

Hoe componenten in Vue te registreren

Tot nu toe hebben we gezien hoe we componenten in Vue kunnen maken. De volgende stap zal zijn om deze componenten in een ander component te gebruiken (bovenliggende-onderliggende hiërarchie).

Hiervoor moeten we eerst de componenten registreren die we willen gebruiken. Deze registratie omvat het importeren en vervolgens registreren van componenten. Er zijn twee opties om dit te doen: globaal en lokale registratie.

Vue-componenten – Globale registratie

Globaal geregistreerde componenten zijn, zoals de naam al aangeeft, wereldwijd beschikbaar, wat betekent dat ze in elk onderdeel van onze applicatie kunnen worden gebruikt zonder dat we ze opnieuw hoeven te importeren. Dit wordt bereikt door een component te registreren met behulp van de app.component() methode:

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

In een situatie waarin we veel componenten hebben, kan dat wel keten ze op deze manier:

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

Nadat we onze componenten hebben geregistreerd, kunnen we ze gebruiken in de sjabloon van elk onderdeel binnen deze applicatie met behulp van de volgende syntaxis:

<ChildComponent/>
<ProfileComponent/>

Vue-componenten – Lokale registratie

In de meeste gevallen zullen we lokale registratie gebruiken, omdat we hiermee de beschikbaarheid van onze geregistreerde componenten kunnen bepalen. Door deze componenten te importeren en ze vervolgens toe te voegen aan het components optie bereikt dit:

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

Gebruik bij het benoemen van componenten Kameelgeval om duidelijk te maken dat dit een Vue-component is in plaats van een native HTML-element in sjablonen. Dit maakt het ook eenvoudiger om componenten in JavaScript te importeren en te registreren.

Gegevens doorgeven via Vue-componenten

Een van de voordelen van het maken van componenten is de mogelijkheid om code opnieuw te gebruiken door deze modulair te maken.

Stel dat we een gebruikersprofielcomponent maken die de gegevens van elke leerling van de profielpagina moet ontvangen; in dit geval moeten we deze gegevens doorgeven van de profielcomponent (bovenliggende component) naar de gebruikersprofielcomponent (onderliggende component), en zullen we rekwisieten gebruiken.

rekwisieten

Props zijn aangepaste attributen die we op een component kunnen registreren, zodat we gegevens van de bovenliggende component aan de onderliggende component kunnen doorgeven met behulp van de props optie binnen de scripttag:

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

Gokkasten

Vue-slots zijn gereserveerde ruimtes waarmee we elk type inhoud van de ene component naar de andere kunnen doorgeven. Dit geeft meer gecentraliseerde controle dan rekwisieten, omdat, in tegenstelling tot rekwisieten, de bovenliggende component de inhoud binnen de onderliggende component bestuurt. We kunnen bijvoorbeeld de volgende knop maken:

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

Dan kunnen we dit onderdeel overal gebruiken waar we maar willen en het de inhoud geven die we wensen. Als je er geen inhoud aan geeft, betekent dit dat het gebruik zal maken van de standaardwaarde die we eraan hebben gegeven (klik op mij):

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

Gebeurtenissen verzenden vanuit Vue-componenten

We hebben geleerd dat rekwisieten worden gebruikt om gegevens van de bovenliggende component naar de onderliggende component te verzenden. Maar we kunnen ons afvragen of er een manier is om iets van de onderliggende component naar de bovenliggende component te sturen. En het antwoord is jakunnen gebeurtenissen ook van de onderliggende component naar de bovenliggende component worden verzonden.

Stel dat we een bovenliggende component hebben (App.vue) die één onderliggende component bevat (MyBlogPost.vue). Verder bevat de kindcomponent een knop waarmee de titel moet worden gewijzigd.

Stel dat we de titel van onze pagina willen veranderen wanneer er op een knop wordt geklikt, zodat een functie wordt geactiveerd:

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

En de onderliggende component ziet er als volgt uit:

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

Conclusie

In deze handleiding hebben we geleerd hoe we met componenten in Vue kunnen werken, wat essentieel is voor iedereen die Vue gebruikt. We hebben ook geleerd hoe we gegevens kunnen verzenden en ontvangen, en hoe we gebeurtenissen kunnen uitzenden.

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://stackabuse.com/introduction-to-vue-components/