Introducere în Vue Components

Introducere

Când dezvoltați o aplicație mare, este întotdeauna o idee bună să o împărțiți în componente mai mici pentru a face codul mai ușor de citit, structurat și întreținut. Majoritatea începătorilor Vue înțeleg ce componente sunt cel puțin conceptual, dar s-ar putea să nu înțeleagă ce pot sau nu pot face pe deplin.

În acest ghid, vom arunca o privire la ce este o componentă în Vue, cum funcționează, cum să trecem date și evenimente prin ele și multe altele.

Ce este o componentă Vue?

Componente sunt instanțe reutilizabile ale elementelor Vue care includ șabloane, stiluri și elemente JavaScript. Fiecare componentă este „lucru propriu”, similar modului în care fiecare element HTML este „lucru propriu”, și atât componentele Vue, cât și elementele HTML ne permit să le folosim ca blocuri de construcție pentru pagini web.

Poți să te gândești la componentele Vue ca la elemente HTML impregnate de JavaScript, pe care le poți defini și manipula singur.

O aplicație tipică Vue este formată din numeroase componente care pot fi reutilizate de câte ori este nevoie.

De exemplu, un site web obișnuit are secțiuni care apar pe toate paginile – bara de navigare, antet, subsol și așa mai departe. Prin urmare, este considerată o bună practică ca fiecare dintre ele să fie o componentă separată. În acest fel, creăm cod bine structurat, lizibil, reutilizabil și ușor de întreținut:

Cum se creează o componentă Vue

Există două moduri de bază de a crea o componentă Vue, în funcție de modul în care a fost creat proiectul nostru - cu sau fără o configurație de construcție. În primul caz, fiecare componentă este stocată într-un fișier separat. În al doilea caz, pot exista mai multe componente într-un singur fișier.

Creați componente Vue cu o configurație de construcție

Majoritatea proiectelor sunt create folosind configurarea construirii, care ne permite să creăm Componente cu un singur fișier (SFC-uri) – fișiere componente dedicate cu .vue extensie. Acest lucru ne permite să încapsulăm șablonul, logica și stilul unei componente Vue într-un singur fișier:

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

Creați componente Vue fără o configurare de construcție

Dacă, din orice motiv, nu puteți utiliza un manager de pachete, cum ar fi npm pentru a instala Vue pe computer, puteți utiliza Vue în continuare în aplicația dvs. O alternativă la construcția Vue folosind npm este să instalezi Vue printr-un CDN (Rețea de livrare de conținut) direct în aplicația dvs. Să trecem rapid peste acest mod de a crea o componentă Vue.

Instalarea Vue fără build ne va permite să folosim funcționalități specifice Vue așa cum facem cu JavaScript simplu. Sintaxa este oarecum similară cu ceea ce am văzut în SFC-urile obișnuite:

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

În acest ghid, vom folosi Sintaxa SFC, deoarece aceasta este metoda cea mai frecvent utilizată de a crea componente.

Cum se înregistrează componente în Vue

Până acum, am văzut cum să creăm componente în Vue. Următorul pas va fi utilizarea acestor componente într-o altă componentă (ierarhia părinte-copil).

Pentru a face acest lucru, trebuie mai întâi să înregistrăm componentele pe care dorim să le folosim. Această înregistrare presupune importarea și apoi înregistrarea componentelor. Există două opțiuni pentru a face acest lucru - global și înregistrare locală.

Vue Components – Înregistrare globală

Componentele înregistrate la nivel global, după cum sugerează și numele, sunt disponibile la nivel global, ceea ce înseamnă că pot fi utilizate în orice componentă a aplicației noastre fără a fi nevoie să le importam din nou. Acest lucru se realizează prin înregistrarea unei componente folosind app.component() metodă:

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

Într-o situație în care avem multe componente, putem lanţ ele astfel:

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

După ce ne-am înregistrat componentele, le putem folosi în șablonul oricărei componente din această aplicație folosind următoarea sintaxă:

<ChildComponent/>
<ProfileComponent/>

Vue Components – Înregistrare locală

Vom folosi înregistrarea locală în cele mai multe cazuri, deoarece ne permite să stabilim disponibilitatea componentelor noastre înregistrate. Importul acestor componente și apoi adăugarea lor la components opțiunea realizează acest lucru:

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

Când denumiți componente, utilizați CamelCase pentru a clarifica faptul că aceasta este o componentă Vue mai degrabă decât un element HTML nativ în șabloane. Acest lucru facilitează, de asemenea, importarea și înregistrarea componentelor în JavaScript.

Cum să transmiteți date prin componentele Vue

Unul dintre avantajele creării componentelor este capacitatea de a reutiliza codul făcându-l modular.

Să presupunem că creăm o componentă de profil a utilizatorului care trebuie să primească datele fiecărui student de pe pagina de profil; în acest caz, trebuie să transmitem aceste date din componenta de profil (componenta părinte) la componenta de profil utilizator (componenta copil) și vom folosi elemente de recuzită.

recuzită

Recuzitele sunt atribute personalizate pe care le putem înregistra pe o componentă, astfel încât să putem transmite date de la componenta părinte la componenta copil folosind props opțiunea din eticheta de script:

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

sloturi

Sloturile Vue sunt spații rezervate care ne permit să trecem orice tip de conținut de la o componentă la alta. Acest lucru oferă un control mai centralizat decât elementele de recuzită, deoarece, spre deosebire de elemente de recuzită, componenta părinte controlează conținutul din interiorul componentei secundare. De exemplu, am putea face următorul buton:

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

Apoi putem folosi această componentă oriunde dorim și să îi oferim conținutul pe care ni-l dorim. Eșecul de a-i oferi un conținut înseamnă că va folosi valoarea implicită pe care i-am dat-o (clic pe mine):

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

Cum să emiti evenimente din Vue Components

Am aflat că elementele de recuzită sunt folosite pentru a trimite date de la componenta părinte la componenta copil. Dar ne-am putea întreba dacă a existat o modalitate de a trimite ceva de la componenta copil la componenta părinte. Și răspunsul este da, evenimentele pot fi trimise și de la componenta fiu la componenta părinte.

Să presupunem că avem o componentă părinte (App.vue) care conține o singură componentă copil (MyBlogPost.vue). În plus, componenta copil conține un buton care ar trebui să schimbe titlul.

Să presupunem că vrem să schimbăm titlul paginii noastre când se face clic pe un buton, astfel încât să fie declanșată o funcție:

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

Și componenta copil va arăta astfel:

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

Concluzie

În acest ghid, am învățat cum să lucrăm cu componente în Vue, ceea ce este esențial pentru oricine folosește Vue. De asemenea, am învățat cum să trimitem și să primim date, precum și cum să emitem evenimente.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://stackabuse.com/introduction-to-vue-components/