Uvod v komponente Vue

Predstavitev

Ko razvijate veliko aplikacijo, je vedno dobro, da jo razdelite na manjše komponente, da bo koda lažja za branje, strukturiranje in vzdrževanje. Večina začetnikov Vue razume, katere komponente so vsaj konceptualno, vendar morda ne razumejo, kaj lahko in česa ne morejo narediti v celoti.

V tem priročniku si bomo ogledali, kaj je komponenta v Vue, kako deluje, kako posredovati podatke in dogodke prek njih in še veliko več.

Kaj je komponenta Vue?

Sestavni deli so večkrat uporabni primerki elementov Vue, ki vključujejo predloge, sloge in elemente JavaScript. Vsaka komponenta je »svoja stvar«, podobno kot je vsak element HTML »svoja stvar«, komponente Vue in elementi HTML pa nam omogočajo, da jih uporabimo kot gradnike za spletne strani.

Komponente Vue si lahko predstavljate kot elemente HTML, prežete z JavaScriptom, ki jih lahko definirate in manipulirate sami.

Tipična aplikacija Vue je sestavljena iz številnih komponent, ki jih je mogoče ponovno uporabiti tolikokrat, kot je potrebno.

Na primer, običajno spletno mesto ima razdelke, ki se pojavljajo na vseh straneh – navbar, glava, noga itd. Zato se šteje za dobro prakso, da je vsak od njih ločena komponenta. Na ta način ustvarjamo dobro strukturirano, berljivo kodo, ki jo je mogoče ponovno uporabiti in enostavno vzdrževati:

Kako ustvariti komponento Vue

Obstajata dva osnovna načina za ustvarjanje komponente Vue, odvisno od tega, kako je bil ustvarjen naš projekt – z ali brez nastavitve gradnje. V prvem primeru je vsaka komponenta shranjena v ločeni datoteki. V drugem primeru je lahko v eni datoteki več komponent.

Ustvarite komponente Vue z nastavitvijo gradnje

Večina projektov je ustvarjenih z uporabo nastavitev gradnje, ki nam omogoča ustvarjanje komponent z eno datoteko (SFC) – datoteke namenskih komponent z .vue razširitev. To nam omogoča, da predlogo, logiko in slog komponente Vue zajamemo v eno datoteko:

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

Ustvarite komponente Vue brez nastavitve gradnje

Če iz kakršnega koli razloga ne morete uporabiti upravitelja paketov, kot je npr npm če želite namestiti Vue na vaš računalnik, lahko še vedno uporabljate Vue v svoji aplikaciji. Alternativa uporabi zgradbe Vue npm je namestiti Vue prek a CDN (omrežje za pošiljanje vsebine) neposredno v vaši aplikaciji. Na hitro preglejmo ta način ustvarjanja komponente Vue.

Namestitev Vue brez gradnje nam bo omogočila uporabo funkcij, specifičnih za Vue, kot to počnemo z navadnim JavaScriptom. Sintaksa je nekoliko podobna tisti, ki smo jo videli v običajnih SFC-jih:

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

V tem priročniku bomo uporabljali Sintaksa SFC, saj je to najpogosteje uporabljen način ustvarjanja komponent.

Kako registrirati komponente v Vue

Doslej smo videli, kako ustvariti komponente v Vue. Naslednji korak bo uporaba teh komponent znotraj druge komponente (hierarhija starš-otrok).

Za to moramo najprej registrirati komponente, ki jih želimo uporabiti. Ta registracija vključuje uvoz in nato registracijo komponent. Obstajata dve možnosti za to – globalna in lokalna registracija.

Komponente Vue – globalna registracija

Globalno registrirane komponente, kot pove ime, so na voljo globalno, kar pomeni, da jih je mogoče uporabiti v kateri koli komponenti naše aplikacije, ne da bi nam jih bilo treba znova uvoziti. To se doseže z registracijo komponente z uporabo app.component() metoda:

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

V situaciji, ko imamo veliko komponent, lahko verige takole:

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

Ko registriramo naše komponente, jih lahko uporabimo v predlogi katere koli komponente znotraj te aplikacije z naslednjo sintakso:

<ChildComponent/>
<ProfileComponent/>

Komponente Vue – lokalna registracija

V večini primerov bomo uporabili lokalno registracijo, ker nam omogoča pregled razpoložljivosti naših registriranih komponent. Uvoz teh komponent in njihovo nato dodajanje v components možnost doseže to:

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

Pri poimenovanju komponent uporabite CamelCase da bo jasno, da je to komponenta Vue in ne izvorni element HTML v predlogah. To tudi olajša uvoz in registracijo komponent v JavaScript.

Kako prenesti podatke skozi komponente Vue

Ena od prednosti ustvarjanja komponent je možnost ponovne uporabe kode, tako da postane modularna.

Recimo, da ustvarjamo komponento profila uporabnika, ki mora prejeti podatke vsakega študenta s strani profila; v tem primeru moramo te podatke prenesti navzdol od komponente profila (starševske komponente) do komponente uporabniškega profila (podrejene komponente) in uporabili bomo rekvizite.

rekviziti

Rekviziti so atributi po meri, ki jih lahko registriramo na komponenti, tako da lahko posredujemo podatke iz nadrejene komponente v podrejeno komponento z uporabo props možnost znotraj oznake skripta:

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

reže

Reže Vue so rezervirani prostori, ki nam omogočajo prenos katere koli vrste vsebine iz ene komponente v drugo. To daje bolj centraliziran nadzor kot rekviziti, ker za razliko od rekvizitov nadrejena komponenta nadzira vsebino znotraj podrejene komponente. Na primer, lahko naredimo naslednji gumb:

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

Nato lahko to komponento uporabimo kjerkoli želimo in ji damo želeno vsebino. Če mu ne dodelite vsebine, bo uporabil privzeto vrednost, ki smo mu jo dali (Klikni me):

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

Kako oddajati dogodke iz komponent Vue

Izvedeli smo, da se rekviziti uporabljajo za pošiljanje podatkov od nadrejene komponente navzdol do podrejene komponente. Lahko pa se vprašamo, ali obstaja način, da nekaj pošljemo iz podrejene komponente v nadrejeno komponento. In odgovor je ja, lahko dogodke pošljete tudi iz podrejene komponente v nadrejeno komponento.

Predpostavimo, da imamo nadrejeno komponento (App.vue), ki vsebuje eno samo podrejeno komponento (MyBlogPost.vue). Poleg tega podrejena komponenta vsebuje gumb, ki naj bi spremenil naslov.

Recimo, da želimo spremeniti naslov naše strani, ko kliknemo gumb, tako da se sproži funkcija:

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

In podrejena komponenta bo videti takole:

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

zaključek

V tem priročniku smo se naučili delati s komponentami v Vue, kar je bistveno za vse, ki uporabljajo Vue. Naučili smo se tudi pošiljati in sprejemati podatke ter oddajati dogodke.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://stackabuse.com/introduction-to-vue-components/