Wprowadzenie do komponentów Vue

Wprowadzenie

Podczas tworzenia dużej aplikacji zawsze dobrym pomysłem jest podzielenie jej na mniejsze komponenty, aby kod był łatwiejszy do odczytania, uporządkowania i utrzymania. Większość początkujących Vue rozumie, czym są komponenty, przynajmniej koncepcyjnie, ale mogą nie rozumieć, co mogą, a czego nie mogą w pełni zrobić.

W tym przewodniku przyjrzymy się, czym jest komponent w Vue, jak działa, jak przekazywać przez nie dane i zdarzenia oraz wiele więcej.

Co to jest komponent Vue?

Podzespoly Komputerowe to instancje elementów Vue wielokrotnego użytku, które obejmują szablony, style i elementy JavaScript. Każdy komponent jest „swoją rzeczą”, podobnie jak każdy element HTML jest „swoją rzeczą”, a zarówno komponenty Vue, jak i elementy HTML pozwalają nam używać ich jako elementów składowych stron internetowych.

Możesz myśleć o komponentach Vue jako o elementach HTML nasyconych JavaScriptem, które możesz samodzielnie definiować i którymi możesz manipulować.

Typowa aplikacja Vue składa się z wielu komponentów, które można wykorzystywać wielokrotnie.

Na przykład zwykła witryna internetowa ma sekcje, które pojawiają się na wszystkich stronach — pasek nawigacyjny, nagłówek, stopka itd. W związku z tym uważa się za dobrą praktykę, aby każdy z nich był oddzielnym składnikiem. W ten sposób tworzymy dobrze ustrukturyzowany, czytelny, wielokrotnego użytku i łatwy w utrzymaniu kod:

Jak stworzyć komponent Vue

Istnieją dwa podstawowe sposoby tworzenia komponentu Vue, w zależności od tego, jak powstał nasz projekt – z konfiguracją kompilacji lub bez niej. W pierwszym przypadku każdy komponent jest przechowywany w osobnym pliku. W drugim przypadku w jednym pliku może znajdować się wiele komponentów.

Twórz komponenty Vue za pomocą konfiguracji kompilacji

Większość projektów jest tworzonych przy użyciu konfiguracja kompilacji, co umożliwia nam tworzenie komponentów jednoplikowych (SFC) – dedykowane pliki składowe z rozszerzeniem .vue rozbudowa. To pozwala nam zamknąć szablon, logikę i styl komponentu Vue w jednym pliku:

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

Twórz komponenty Vue bez konfiguracji kompilacji

Jeśli z jakiegokolwiek powodu nie możesz użyć menedżera pakietów, takiego jak npm aby zainstalować Vue na swoim komputerze, nadal możesz używać Vue w swojej aplikacji. Alternatywa dla budynku z wykorzystaniem Vue npm jest zainstalowanie Vue przez a CDN (sieć dostarczania treści) bezpośrednio w Twojej aplikacji. Omówmy szybko ten sposób tworzenia komponentu Vue.

Zainstalowanie Vue bez kompilacji umożliwi nam korzystanie z funkcjonalności specyficznych dla Vue, tak jak robimy to ze zwykłym JavaScriptem. Składnia jest nieco podobna do tej, którą widzieliśmy w zwykłych SFC:

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

W tym przewodniku będziemy używać Składnia SFC, ponieważ jest to najczęściej stosowana metoda tworzenia komponentów.

Jak zarejestrować komponenty w Vue

Do tej pory widzieliśmy, jak tworzyć komponenty w Vue. Następnym krokiem będzie użycie tych komponentów w innym komponencie (hierarchia rodzic-dziecko).

Aby to zrobić, musimy najpierw zarejestrować komponenty, których chcemy użyć. Rejestracja ta obejmuje import, a następnie rejestrację komponentów. Są na to dwie możliwości – światowy i lokalna rejestracja.

Komponenty Vue – rejestracja globalna

Globalnie zarejestrowane komponenty, jak sama nazwa wskazuje, są dostępne globalnie, co oznacza, że ​​można ich używać w dowolnym komponencie naszej aplikacji bez konieczności ich ponownego importowania. Osiąga się to poprzez rejestrację komponentu przy użyciu app.component() metoda:

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

W sytuacji, gdy mamy wiele składowych, możemy łańcuch je w ten sposób:

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

Po zarejestrowaniu naszych komponentów możemy ich użyć w szablonie dowolnego komponentu w tej aplikacji, używając następującej składni:

<ChildComponent/>
<ProfileComponent/>

Komponenty Vue – rejestracja lokalna

W większości przypadków będziemy korzystać z rejestracji lokalnej, ponieważ pozwala nam to określić zakres dostępności naszych zarejestrowanych składników. Importowanie tych komponentów, a następnie dodawanie ich do pliku components opcja realizuje to:

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

Nazywając komponenty, użyj WielbłądCase aby było jasne, że jest to komponent Vue, a nie natywny element HTML w szablonach. Ułatwia to również importowanie i rejestrowanie komponentów w JavaScript.

Jak przekazywać dane przez komponenty Vue

Jedną z zalet tworzenia komponentów jest możliwość ponownego wykorzystania kodu poprzez uczynienie go modułowym.

Załóżmy, że tworzymy komponent profilu użytkownika, który musi otrzymywać dane każdego ucznia ze strony profilu; w tym przypadku musimy przekazać te dane z komponentu profile (komponent nadrzędny) do komponentu user-profile (komponent podrzędny) i użyjemy rekwizytów.

rekwizyty

Rekwizyty to niestandardowe atrybuty, które możemy zarejestrować w komponencie, dzięki czemu możemy przekazywać dane z komponentu nadrzędnego do komponentu podrzędnego za pomocą props opcja w tagu skryptu:

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

Sloty

Sloty Vue to zarezerwowane przestrzenie, które pozwalają nam przekazywać dowolny rodzaj treści z jednego komponentu do drugiego. Zapewnia to bardziej scentralizowaną kontrolę niż właściwości rekwizyty, ponieważ w przeciwieństwie do właściwości rekwizyty komponent nadrzędny kontroluje zawartość komponentu potomnego. Na przykład możemy zrobić następujący przycisk:

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

Następnie możemy używać tego komponentu w dowolnym miejscu i nadać mu pożądaną treść. Brak podania treści oznacza, że ​​skorzysta z domyślnej wartości, którą mu nadaliśmy (Kliknij mnie):

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

Jak emitować zdarzenia z komponentów Vue

Dowiedzieliśmy się, że rekwizyty służą do przesyłania danych z komponentu nadrzędnego do komponentu potomnego. Ale możemy się zastanawiać, czy istnieje sposób na przesłanie czegoś z komponentu potomnego do komponentu nadrzędnego. A odpowiedź brzmi tak, zdarzenia mogą być również wysyłane z komponentu podrzędnego do komponentu nadrzędnego.

Załóżmy, że mamy komponent nadrzędny (App.vue), który zawiera pojedynczy komponent potomny (MyBlogPost.vue). Ponadto komponent potomny zawiera przycisk, który ma za zadanie zmienić tytuł.

Załóżmy, że chcemy zmienić tytuł naszej strony po kliknięciu przycisku, aby wywołać funkcję:

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

A komponent potomny będzie wyglądał tak:

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

Wnioski

W tym przewodniku nauczyliśmy się, jak pracować z komponentami w Vue, co jest niezbędne dla każdego, kto używa Vue. Dowiedzieliśmy się również, jak wysyłać i odbierać dane, a także jak emitować zdarzenia.

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://stackabuse.com/introduction-to-vue-components/