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.
Opmerking: Uitleggen wat is een opstelling bouwen en hoe u dit moet uitvoeren valt ver buiten het bestek van deze handleiding. Als je meer wilt weten over de basisprincipes van Vue, is de goede plek om te beginnen de "Snelle start" artikel uit de officiรซle Vue-documentatie.
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>
Opmerking: Om conflicten met bestaande en toekomstige HTML-elementen te voorkomen, is het altijd het beste om namen van meerdere woorden te gebruiken in plaats van namen van รฉรฉn woord bij het benoemen van onze componenten. Dit geldt niet voor ingebouwde componenten zoals de rootcomponent (App
, Transition
, enzovoort).
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.
Opmerking: Voor het verwijzen naar onze geregistreerde component binnen de sjabloon gebruiken we doorgaans Kameelgeval or kebab-koffer labels โ <MyComponent />
or <my-component />
, Respectievelijk.
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>
Opmerking: U kunt meer leren over rekwisieten en hoe u verschillende soorten gegevens van de bovenliggende component naar de onderliggende component kunt doorgeven โGids voor Vue-rekwisietenโ.
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.
Bekijk onze praktische, praktische gids voor het leren van Git, met best-practices, door de industrie geaccepteerde normen en bijgevoegd spiekbriefje. Stop met Googlen op Git-commando's en eigenlijk leren het!
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/
- 1
- 10
- 7
- 9
- a
- vermogen
- Over
- volbracht
- werkelijk
- Alarm
- Alles
- toestaat
- alternatief
- altijd
- en
- Nog een
- beantwoorden
- iedereen
- overal
- gebruiken
- verschijnen
- Aanvraag
- Solliciteer
- dit artikel
- attributen
- beschikbaarheid
- Beschikbaar
- basis-
- De Basis
- omdat
- beginners
- betekent
- BEST
- Verder
- Blokken
- grens
- Breken
- bouw
- Gebouw
- ingebouwd
- kan niet
- geval
- gevallen
- gecentraliseerde
- verandering
- kind
- duidelijk
- code
- algemeen
- bestanddeel
- componenten
- conceptueel
- conclusie
- beschouwd
- bevat
- content
- onder controle te houden
- controles
- kon
- en je merk te creรซren
- aangemaakt
- Wij creรซren
- CSS
- gewoonte
- gegevens
- toegewijd aan
- Standaard
- levering
- Afhankelijk
- het ontwikkelen van
- anders
- direct
- documentatie
- doen
- beneden
- dropbox
- elk
- gemakkelijker
- gemakkelijk
- geeft je de mogelijkheid
- in staat stellen
- maakt
- essentieel
- EVENTS
- Alle
- voorbeeld
- bestaand
- uitleggen
- uitbreiding
- Storing
- Dien in
- Bestanden
- Voornaam*
- Focus
- volgend
- formulier
- oppompen van
- geheel
- functie
- functionaliteiten
- Bovendien
- toekomst
- Git
- Geven
- geeft
- Globaal
- Wereldwijd
- Go
- goed
- gids
- hands-on
- met
- hiรซrarchie
- zweven
- Hoe
- How To
- HTML
- HTTPS
- ICON
- idee
- importeren
- importeren
- in
- omvatten
- inclusief
- installeren
- Introductie
- IT
- JavaScript
- Groot
- LEARN
- geleerd
- leren
- LG
- lokaal
- Kijk
- ziet eruit als
- machine
- gemaakt
- onderhouden
- Onderhoudbaar
- maken
- MERKEN
- maken
- manager
- veel
- middel
- methode
- macht
- modulaire
- meer
- meest
- meervoudig
- naam
- namen
- naamgeving
- inheemse
- behoeften
- netwerk
- New
- volgende
- vele
- officieel
- EEN
- Keuze
- Opties
- het te bezitten.
- pakket
- Uitvoeren
- plaats
- Eenvoudig
- Plato
- Plato gegevensintelligentie
- PlatoData
- PRAKTISCH
- praktijk
- Profiel
- project
- projecten
- Quick
- snel
- Lees
- reden
- ontvangen
- Rood
- registreren
- geregistreerd
- registreren
- Registratie
- gereserveerd
- herbruikbare
- Ring
- wortel
- omvang
- Tweede
- secties
- apart
- Shadow
- gelijk
- single
- situatie
- speelautomaten
- kleinere
- So
- iets
- enigszins
- ruimten
- normen
- begin
- Stap voor
- Still
- stop
- opgeslagen
- structuur
- Student
- voorleggen
- dergelijk
- vermeend
- SVG
- syntaxis
- TAG
- Nemen
- sjabloon
- templates
- De
- daarom
- ding
- Door
- keer
- Titel
- naar
- ook
- overgang
- veroorzaakt
- waar
- types
- typisch
- typisch
- begrijpen
- us
- .
- Gebruiker
- waarde
- Ve
- via
- uitzicht
- manieren
- web
- Website
- Wat
- Wat is
- welke
- wil
- binnen
- zonder
- Mijn werk
- Bedrijven
- wereld
- XML
- You
- Your
- jezelf
- zephyrnet